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