aria-describedby

Свойство связи из 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 у элементов, с которыми можно взаимодействовать.

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

Если хотите скрыть связанный с помощью aria-describedby текст ошибки, когда её нет на странице, используйте JavaScript. Можно добавлять и удалять элемент полностью или только текст из него. Другой вариант — добавлять атрибут и связанный с ним id когда ошибка появляется.

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

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

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

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

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

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