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

Описание

Атрибут tabindex в теге <thead> определяет, может ли группа заголовков таблицы получать фокус при навигации с клавиатуры (Tab). Этот атрибут полезен для создания доступных интерактивных таблиц.

Пример использования:
<table> <thead tabindex="0"> <tr> <th>Интерактивные заголовки</th> <th>Нажмите Tab</th> </tr> </thead> <tbody> <tr> <td>Данные 1</td> <td>Данные 2</td> </tr> </tbody> </table>

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

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

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

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

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

  • Используйте tabindex="0" для сортируемых заголовков
  • Сочетайте с ARIA-ролями для улучшения доступности
  • Добавляйте визуальные стили для состояния фокуса
  • Тестируйте с клавиатурной навигацией

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

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

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

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

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

  • Реализуйте обработчики клавиш (Enter/Space для сортировки)
  • Используйте aria-sort для указания направления сортировки
  • Добавьте текстовые подсказки для скринридеров