aria-describedby

Как добавить краткое описание к элементу.

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Свойство связи из WAI-ARIA для элемента, который содержит краткое описание для другого.

Описание из aria-describedby визуально видно на странице и доступно для всех пользователей.

Пример

Секция статьи "Пример"
        
          
          <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-describedby с одним или несколькими ID через пробел и свяжите с ним элемент с описанием через id.

aria-describedby можно использовать для всех интерактивных и некоторых неинтерактивных элементов — групп элементов, областей страниц с заголовками, определений и похожего содержимого.

Также aria-describedby можно связывать не только с видимыми элементами, но и со скрытыми с помощью hidden, display: none или visibility: hidden.

Описание из aria-describedby должно быть строкой текста и располагаться на одной странице с элементом, с которым оно связано.

Как понять

Секция статьи "Как понять"

Атрибут связывает с элементом дополнительную информацию, которую нельзя добавить в имя элемента — краткое название элемента, которое озвучивает скринридер при фокусе или последовательном зачитывании содержимого. Например, подсказку по заполнению поля. Скринридер прочтёт эту подсказку при фокусе на поле сразу после его лейбла, роли и типа.

Подсказки

Секция статьи "Подсказки"

💡 Не путайте aria-labelledby и aria-describedby. aria-labelledby содержит краткую видимую подпись, а aria-describedby — более развёрнутое дополнительное описание.

💡 Есть другое свойство для описания элемента — aria-description. Оно задаёт элементу описание, которое видно только вспомогательным технологиям.

💡 Следите за поддержкой aria-describedby в разных браузерах и разными скринридерами.

💡 У скринридеров есть настройка объёма информации (verbosity setting), который они зачитают. Она влияет на то, услышат ли контент из aria-describedby пользователи или нет. Учитывайте это при тестировании.