aria-details

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

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

Содержимое 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 можно добавлять больше одного значения. Их перечисляют через пробел. Пока несколько значений плохо поддерживаются, так что лучше остановиться на одном.

        
          
          <img  src="japanese-spitz.jpg"  alt="Японский шпиц"  aria-details="more-details more-link"><details id="more-details">  <summary>Интересные факты</summary>  <ul>    <li>      Ближайшая родственная порода — немецкий шпиц.    </li>    <li>      Редкая порода, поэтому щенки стоят дорого.    </li>    <li>      Японских шпицов тоже называют «облаками»,      как самоедов.    </li>  </ul></details><a  href="https://www.dailypaws.com/dogs-puppies/dog-breeds/japanese-spitz"  id="more-link">  Статья про японского шпица</a>
          <img
  src="japanese-spitz.jpg"
  alt="Японский шпиц"
  aria-details="more-details more-link"
>

<details id="more-details">
  <summary>Интересные факты</summary>
  <ul>
    <li>
      Ближайшая родственная порода — немецкий шпиц.
    </li>
    <li>
      Редкая порода, поэтому щенки стоят дорого.
    </li>
    <li>
      Японских шпицов тоже называют «облаками»,
      как самоедов.
    </li>
  </ul>
</details>

<a
  href="https://www.dailypaws.com/dogs-puppies/dog-breeds/japanese-spitz"
  id="more-link"
>
  Статья про японского шпица
</a>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

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

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