HTML-атрибут aria-describedby
HTML-атрибут aria-describedby: применимые элементы, формат значения, пример разметки, частые ошибки и данные совместимости браузеров.
Когда применять
«aria-describedby» рассматривается не как изолированный синтаксис, а как часть области «доступность ARIA». Атрибут aria-describedby применяется к элемент по спецификации и дополняет дерево доступности, но не добавляет нативного поведения элементу. Практический контекст для «aria-describedby» — в каталоге с динамической длиной текста; во время проверки используйте нативное действие вместо имитации клика.
Где применяется: элемент по спецификации.
Проверяя «aria-describedby», соблюдайте правило: сначала используйте семантический HTML, затем добавляйте ARIA только для недостающей информации. Для «aria-describedby» изменяйте одно условие за запуск и фиксируйте фактический результат.
Синтаксис aria-describedby
Для демонстрации «aria-describedby» используется короткий код с наблюдаемым результатом. Сохраните структуру примера, когда будете проверять другое значение.
<button type="button" aria-describedby="Открыть настройки">⚙</button>Как работает aria-describedby
Чтобы объяснить работу «aria-describedby», проследите путь от структуры и входного значения до отображения или поведения. Атрибут aria-describedby применяется к элемент по спецификации и дополняет дерево доступности, но не добавляет нативного поведения элементу. Контрольная точка для «aria-describedby» — результат при отключённом JavaScript.
Проверка в проекте
- Сначала используйте семантический HTML, затем добавляйте ARIA только для недостающей информации; результат относится непосредственно к «aria-describedby».
- Сравнить результат с отключёнными стилями и сохранить логичный порядок содержимого при разборе «aria-describedby».
- Проверьте «aria-describedby» в каталоге с динамической длиной текста через момент загрузки ресурса в Network и запишите наблюдаемое изменение.
Оставляйте «aria-describedby» в решении только после проверки в каталоге с динамической длиной текста. Если нативная конструкция решает задачу «aria-describedby» с меньшим числом условий, используйте её.
Практика с aria-describedby
Создайте два варианта «aria-describedby» на контрольной странице: корректный и с одной типичной ошибкой. Сравните варианты «aria-describedby» через момент загрузки ресурса в Network и объясните различие.
Сценарий: в каталоге с динамической длиной текста.
Ошибки при работе с aria-describedby
Контекст
Значение aria-describedby вне допустимого элемента или формата может быть проигнорировано браузером — это предметный риск для «aria-describedby».
Устойчивость
Использование !important вместо разбора каскада при использовании «aria-describedby».
Доступность
Фиксированные размеры, которые перестают вмещать реальное содержимое; для «aria-describedby» проверьте это отдельно.
Поддержка aria-describedby
Для «aria-describedby» таблица собрана из закреплённой версии MDN Browser Compatibility Data. Указанная версия браузера показывает первое заявленное появление базовой поддержки «aria-describedby»; окончательное решение принимайте по аудитории конкретного проекта.
Вопросы о aria-describedby
Как понять, что «aria-describedby» выбрано правильно?
«aria-describedby» выбрано правильно, когда оно решает задачу «передать вспомогательным технологиям состояние, связь или доступное имя», сохраняет результат в каталоге с динамической длиной текста и проходит предметную проверку: сначала используйте семантический HTML, затем добавляйте ARIA только для недостающей информации.
Нужен ли запасной вариант для «aria-describedby»?
Запасной вариант для «aria-describedby» нужен, если целевой браузер или режим не обеспечивает выбранное поведение. Без улучшения «aria-describedby» должно сохранять смысл, содержимое и основное действие.
Спецификации и источники
Синтаксис и статус проверяются по HTML Living Standard, спецификациям CSS и MDN Browser Compatibility Data. Примеры и объяснения подготовлены для этого сервиса.