Атрибут tabindex тега <ol>

Описание

Атрибут tabindex определяет порядок перехода между элементами при навигации с помощью клавиши Tab. Для элемента <ol> этот атрибут позволяет сделать список фокусируемым, что может быть полезно для доступности и интерактивных списков.

Пример использования:
<ol tabindex="0"> <li>Элемент списка 1</li> <li>Элемент списка 2</li> </ol>

Значения атрибута:

Значение Поведение Пример
tabindex="0" Элемент включается в естественный порядок табуляции Обычные интерактивные элементы
tabindex="-1" Элемент исключается из порядка табуляции, но может получать фокус программно Элементы, управляемые JavaScript
Положительное число Определяет явный порядок табуляции (не рекомендуется) tabindex="1"
Не указан Элемент не участвует в табуляции (по умолчанию для <ol>) -

Рекомендации по использованию:

  • Используйте tabindex="0" для интерактивных списков
  • Применяйте tabindex="-1" для элементов, управляемых через JavaScript
  • Избегайте положительных значений - они нарушают естественный поток страницы
  • Сочетайте с ARIA-ролями для улучшения доступности

Пример интерактивного списка:

<ol tabindex="0" style="outline: none;" onfocus="this.style.backgroundColor='#f8f9fa'" onblur="this.style.backgroundColor='transparent'"> <li>Фокусируемый список</li> <li>Нажмите Tab для фокуса</li> </ol>

Доступность:

  • Добавляйте визуальные стили для состояния фокуса
  • Не злоупотребляйте - только для действительно интерактивных элементов
  • Сочетайте с role="listbox" для списков с выбором
  • Убедитесь, что фокусируемые элементы имеют понятное назначение

Ограничения:

  • По умолчанию списки не являются фокусируемыми элементами
  • Чрезмерное использование нарушает логику навигации
  • Положительные значения создают проблемы доступности

Примечание: Атрибут tabindex следует использовать осмотрительно для <ol>, только когда список действительно должен быть частью последовательности навигации. В большинстве случаев стандартные элементы формы и ссылки обеспечивают лучшую семантику и доступность.