aria-details

Атрибут для элемента с подробной информацией о другом.

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

Кратко

Скопировано

Свойство связи из WAI-ARIA. Связывает один элемент с дополнительной подробной информацией о нём. Например, сноску с подробным объяснением термина или ссылку с расшифровкой графика.

Содержимое aria-details видно на странице и доступно для всех, не только для пользователей скринридеров.

Пример

Скопировано
        
          
          <img  src="turtle.png"  alt="Взрослая зелёная черепаха повернулась боком и развернула голову вправо. У неё коричневый овальный панцирь со светлыми разводами. Лапы похожи на ласты, при этом передние больше задних. Снаружи на лапах и на коже головы коричневые пятна, шея и внутрення часть лап почти белые."  aria-details="more-info"><p>Узнать больше про  <a href="https://en.wikipedia.org/wiki/Green_sea_turtle" id="more-info">зелёных морских черепах</a></p>
          <img
  src="turtle.png"
  alt="Взрослая зелёная черепаха повернулась боком и развернула голову вправо. У неё коричневый овальный панцирь со светлыми разводами. Лапы похожи на ласты, при этом передние больше задних. Снаружи на лапах и на коже головы коричневые пятна, шея и внутрення часть лап почти белые."
  aria-details="more-info"
>
<p>Узнать больше про
  <a href="https://en.wikipedia.org/wiki/Green_sea_turtle" id="more-info">зелёных морских черепах</a>
</p>

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

Как пишется

Скопировано

Задайте тегу атрибут aria-details с любым текстовым значением и свяжите с ним другой элемент через id. Атрибут можно использовать для всех тегов и ролей. Важно, чтобы такие элементы и дополнительная информация о них не были скрыты со страницы.

В aria-details можно добавлять больше одного значения. Их перечисляют через пробел. Пока несколько значений плохо поддерживаются, так что лучше остановиться на одном.

aria-details обычно содержит много дополнительной информации об элементе, при этом она может находиться на другой странице.

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

Подсказки

Скопировано

💡 aria-details похож на устаревший HTML-атрибут longdesc.

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