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

Описание

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

Пример использования:
<table border="1"> <tr> <th tabindex="0">Фокусируемый заголовок</th> <th tabindex="1">Заголовок с приоритетом</th> <th tabindex="-1">Только программный фокус</th> </tr> </table>

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

Значение Описание Использование
0 Включает элемент в естественный порядок табуляции Для доступных интерактивных элементов
-1 Исключает из табуляции, но позволяет фокусироваться программно Для динамически управляемых элементов
Положительное число Задает явный порядок табуляции (1, 2, 3...) Не рекомендуется (нарушает естественный поток)

Особенности работы:

  • По умолчанию элементы <th> не фокусируемы
  • Добавляет outline при фокусе (можно стилизовать через CSS)
  • Работает во всех современных браузерах
  • Влияет на доступность для скринридеров

Рекомендации:

  • Используйте tabindex="0" для интерактивных заголовков
  • Избегайте положительных значений (нарушают логический порядок)
  • Сочетайте с JavaScript для сложной навигации
  • Тестируйте с клавиатурной навигацией

Пример с CSS-стилизацией:

<style> th[tabindex]:focus { outline: 2px solid #0066cc; background-color: #e6f2ff; } </style> <table border="1"> <tr> <th tabindex="0">Фокусируемый заголовок</th> </tr> </table>

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

  • Может нарушить естественный поток навигации
  • Требует дополнительной стилизации для визуального фокуса
  • Не все пользователи ожидают фокусируемых заголовков
  • Может конфликтовать с некоторыми CSS-фреймворками

Примечание: Для сложных интерактивных таблиц:

  • Используйте ARIA-роли для улучшения доступности
  • Реализуйте клавиатурные обработчики (Enter, Space)
  • Рассмотрите специализированные компоненты таблиц