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

Описание

Атрибут role в теге <tfoot> определяет семантическую роль элемента для улучшения доступности (a11y) и взаимодействия с вспомогательными технологиями.

Пример использования:
<table> <tfoot role="rowgroup"> <tr role="row"> <td role="cell">Итого: 100 руб.</td> </tr> </tfoot> </table>

Рекомендуемые значения:

Значение Описание
rowgroup Группа строк (рекомендуемая роль для tfoot)
none Явное удаление семантической роли
presentation Декоративный элемент без семантики

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

  • Элемент tfoot по умолчанию имеет неявную роль rowgroup
  • Явное указание роли улучшает поддержку в старых браузерах
  • Влияет на работу скринридеров и других вспомогательных технологий
  • Не изменяет визуальное отображение

Пример с полной доступностью:

<table aria-describedby="summary-desc"> <tfoot role="rowgroup" aria-live="polite"> <tr role="row"> <td role="cell">Итого: <span id="total-amount">100</span> руб.</td> </tr> </tfoot> </table> <div id="summary-desc" hidden>Итоговая сумма таблицы</div> <script> // Динамическое обновление будет объявлено скринридером document.getElementById('total-amount').textContent = '150'; </script>

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

  • Используйте role="rowgroup" для семантической ясности
  • Сочетайте с ARIA-атрибутами (aria-label, aria-describedby)
  • Для интерактивных таблиц указывайте роли всех вложенных элементов
  • Тестируйте с реальными скринридерами (NVDA, VoiceOver)

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

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

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

  • Используйте специализированные роли (grid, rowheader)
  • Рассмотрите библиотеки доступных компонентов (React Aria)
  • Следуйте рекомендациям WAI-ARIA для таблиц