aria-details

Свойство связи из 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.