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

Описание

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

Пример использования:
<table> <tfoot tabindex="0"> <tr> <td>Итого: 100 руб. (нажмите Tab)</td> </tr> </tfoot> </table>

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

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

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

  • По умолчанию элементы таблицы не получают фокус
  • Элементы с tabindex="0" включаются в естественный порядок
  • Элементы с положительным tabindex получают приоритет
  • Поддерживается всеми современными браузерами

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

  • Избегайте положительных значений (нарушают естественный поток)
  • Используйте tabindex="-1" для элементов, управляемых через JS
  • Добавляйте визуальные стили для :focus состояния
  • Тестируйте порядок навигации с клавиатуры

Пример доступной навигации:

<style> tfoot:focus { outline: 2px solid #0066cc; background-color: #f0f7ff; } </style> <table> <tfoot tabindex="0"> <tr><td>Итого: 250 руб. (фокус для деталей)</td></tr> </tfoot> </table>

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

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

Пример плохой практики:

<!-- Путаница в порядке табуляции --> <table> <tfoot tabindex="3"> <tr><td>Футер 1</td></tr> </tfoot> <tbody tabindex="1"> <tr><td>Тело таблицы</td></tr> </tbody> </table>

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

  • Используйте JavaScript для управления фокусом
  • Рассмотрите ARIA-атрибуты для семантики
  • Тестируйте с пользователями клавиатурной навигации
  • Следуйте рекомендациям WCAG 2.1