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

Описание

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

Пример использования:
<table tabindex="0"> <caption>Таблица с возможностью фокуса</caption> <tr> <th>Название</th> <th>Количество</th> </tr> <tr> <td>Яблоки</td> <td>5</td> </tr> </table>

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

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

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

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

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

<style> table:focus { outline: 2px solid #4a90e2; box-shadow: 0 0 5px rgba(74, 144, 226, 0.5); } </style> <table tabindex="0"> <tr><td>Таблица с визуальным выделением при фокусе</td></tr> </table>

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

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

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

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

Примечание: Для сложных интерактивных таблиц лучше использовать специализированные компоненты с ARIA-атрибутами.