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

Описание

Атрибуты aria-* в теге <th> предоставляют дополнительную семантическую информацию для вспомогательных технологий (скринридеров) о заголовках таблицы. Они улучшают доступность сложных табличных структур.

Пример использования:
<table> <tr> <th aria-sort="ascending" aria-label="Название продукта">Продукт</th> <th aria-describedby="price-desc">Цена</th> </tr> <tr> <td>Ноутбук</td> <td>45 000₽</td> </tr> </table> <div id="price-desc" hidden>Цены указаны в рублях без учета налогов</div>

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

Атрибут Описание Пример значения
aria-sort Указывает направление сортировки "ascending", "descending", "none", "other"
aria-label Альтернативный текст для заголовка "Сортировка по дате"
aria-describedby Связывает с дополнительным описанием ID элемента с описанием
aria-colindex Позиция столбца в сложных таблицах "1", "2", "3"
aria-selected Указывает выбранный заголовок "true", "false"

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

  • Не изменяют визуальное отображение
  • Работают только с вспомогательными технологиями
  • Должны отражать реальное состояние элемента
  • Лучше работают в сочетании с нативными HTML-атрибутами

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

  • Используйте aria-sort для сортируемых таблиц
  • Добавляйте aria-label для иконок сортировки
  • Применяйте aria-describedby для сложных заголовков
  • Тестируйте с реальными скринридерами (NVDA, VoiceOver)

Пример сложной таблицы:

<table aria-labelledby="table-title"> <caption id="table-title">Финансовый отчет Q2 2023</caption> <tr> <th aria-sort="none" aria-colindex="1" id="col1">Месяц</th> <th aria-sort="ascending" aria-colindex="2" id="col2" aria-describedby="currency-desc">Доход</th> </tr> <tr aria-rowindex="1"> <td headers="col1">Апрель</td> <td headers="col2">1,200,000₽</td> </tr> </table> <div id="currency-desc" hidden>Все суммы в рублях</div>

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

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

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

  • Обновляйте ARIA-атрибуты при изменении состояния
  • Используйте aria-live для важных изменений
  • Добавляйте клавиатурную навигацию