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

Описание

Атрибуты aria-* для элемента <td> расширяют возможности доступности ячейки таблицы, помогая вспомогательным технологиям правильно интерпретировать её состояние и назначение.

Пример использования:
<table> <tr> <td aria-label="Сумма заказа" aria-describedby="order-note" aria-current="true"> 15 000 руб. </td> </tr> </table> <div id="order-note" hidden>Включает доставку и НДС</div>

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

Атрибут Назначение Пример
aria-label Краткое описание ячейки aria-label="Итого"
aria-labelledby Связь с видимым элементом-меткой aria-labelledby="price-header"
aria-describedby Связь с дополнительным описанием aria-describedby="note1"
aria-current Указывает текущий элемент aria-current="true"

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

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

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

<table> <tr> <td aria-sort="ascending"> Дата ▼ </td> </tr> </table>

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

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

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

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

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