Кратко
СкопированоСвойство связи из WAI-ARIA для элемента, который содержит краткое описание для другого.
Описание из aria
визуально видно на странице и доступно для всех пользователей.
Пример
Скопировано<form> <label for="name">Имя</label> <input id="name" type="text" aria-describedby="format"> <p id="format">Ваше имя без фамилии и отчества.</p></form>
<form> <label for="name">Имя</label> <input id="name" type="text" aria-describedby="format"> <p id="format">Ваше имя без фамилии и отчества.</p> </form>
Скринридер прочтёт поле с подсказкой из примера примерно так: «Имя, редактировать поле. Ваше имя без фамилии и отчества».
Как пишется
СкопированоЗадайте тегу атрибут aria
с одним или несколькими ID через пробел и свяжите с ним элемент с описанием через id
.
aria
можно использовать для всех интерактивных и некоторых неинтерактивных элементов — групп элементов, областей страниц с заголовками, определений и похожего содержимого. Обратите внимание, что пока браузеры и скринридеры лучше поддерживают aria
у элементов, с которыми можно взаимодействовать.
Также aria
можно связывать не только с видимыми элементами, но и со скрытыми с помощью hidden
, display
или visibility
. Учитывайте, что скринридер всё равно в этом случае прочитает связанный с элементом текст.
Если хотите скрыть связанный с помощью aria
текст ошибки, когда её нет на странице, используйте JavaScript. Можно добавлять и удалять элемент полностью или только текст из него. Другой вариант — добавлять атрибут и связанный с ним id
когда ошибка появляется.
Описание из aria
должно быть строкой текста и располагаться на одной странице с элементом, с которым оно связано.
Как понять
СкопированоАтрибут связывает с элементом дополнительную информацию, которую нельзя добавить в имя элемента. Это краткое название элемента, которое озвучивает скринридер при фокусе или последовательном зачитывании содержимого. Например, подсказку по заполнению поля или возникшую ошибку. Скринридер прочтёт этот текст при фокусе на поле сразу после его подписи, роли и типа.
Подсказки
Скопировано💡 Не путайте aria
и aria
. aria
содержит краткую видимую подпись, а aria
— более развёрнутое дополнительное описание.
💡 Есть другое свойство для описания элемента — aria
. Оно задаёт элементу описание, которое видно только вспомогательным технологиям.
💡 Следите за поддержкой aria
в разных браузерах и разными скринридерами.
💡 У скринридеров есть настройка объёма информации (verbosity setting), который они зачитают. Она влияет на то, услышат ли контент из aria
пользователи или нет. Учитывайте это при тестировании.