aria-description

Добавляем к элементу описание, которое видят только вспомогательные технологии.

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

Кратко

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

Глобальное свойство из WAI-ARIA для дополнительного описания элементов, которое видят только вспомогательные технологии.

Пример

Секция статьи "Пример"
        
          
          <button aria-description="Открыть модальное окно">Настройки</button>
          <button aria-description="Открыть модальное окно">Настройки</button>

        
        
          
        
      
Открыть демо в новой вкладке

Скринридер сделает примерно такое объявление: «Настройки, кнопка. Открыть модальное окно».

Как пишется

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

Задайте тегу атрибут aria-description с нужным текстом. Атрибут можно использовать для всех тегов и ARIA-ролей.

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

Если зададите одному элементу одновременно aria-description и aria-describedby, скринридер прочитает описание только из aria-describedby.

Как понять

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

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

Подсказки

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

💡 aria-description чем-то похож на атрибут title, хотя его содержимое не всплывает при наведении на элемент.

💡 Содержимое aria-description пока не переводится сервисами для автоматического перевода.

💡 Не забывайте переводить содержимое атрибута, когда поддерживаете несколько языков.