Атрибут aria-* тега <table>

Описание

Атрибуты aria-* (ARIA - Accessible Rich Internet Applications) улучшают доступность таблиц для пользователей вспомогательных технологий. Они помогают передать структуру и назначение таблицы скринридерам.

Пример использования:
<table aria-label="Финансовые показатели за 2025 год" aria-describedby="table-desc"> <caption id="table-desc">Данные обновлены 15 декабря 2025 года</caption> <tr> <th scope="col">Квартал</th> <th scope="col">Прибыль</th> </tr> <tr> <td>Q1</td> <td>$120,000</td> </tr> </table>

Основные ARIA-атрибуты для таблиц:

Атрибут Описание Пример
aria-label Краткое описание таблицы aria-label="Ежемесячные продажи"
aria-describedby Ссылка на элемент с дополнительным описанием aria-describedby="table-desc"
aria-rowcount Общее количество строк (для частично загруженных таблиц) aria-rowcount="100"
aria-colcount Общее количество столбцов aria-colcount="5"
aria-sort Указывает направление сортировки столбца aria-sort="ascending"

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

  • Дополняют, но не заменяют семантическую HTML-разметку
  • Особенно полезны для динамических таблиц
  • Требуют корректной реализации для работы со скринридерами
  • Поддерживаются современными вспомогательными технологиями

Пример для динамической таблицы:

<table aria-rowcount="100" aria-colcount="4"> <tr aria-rowindex="1"> <th aria-colindex="1" scope="col">ID</th> <th aria-colindex="2" scope="col">Имя</th> <th aria-colindex="3" scope="col" aria-sort="ascending">Дата</th> </tr> <tr aria-rowindex="25"> <td aria-colindex="1">25</td> <td aria-colindex="2">Пример данных</td> <td aria-colindex="3">2025-12-15</td> </tr> </table>

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

  • Используйте aria-label или aria-labelledby для краткого описания
  • Для сложных таблиц указывайте aria-rowcount/aria-colcount
  • Сочетайте с нативными HTML-атрибутами (scope, headers)
  • Тестируйте с различными скринридерами (NVDA, JAWS, VoiceOver)

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

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

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