Добавление атрибутов арии к элементам деталей

Question

При использовании элементов <details> и <summary> необходимо ли добавить какие-либо атрибуты арии для доступности?Или, другими словами, добавление каких-либо атрибутов aria каким-либо образом улучшит доступность элемента?Я думаю aria-expanded, aria-pressed, aria-role и т. Д.

Я знаю, что детали - это семантический элемент, но мне интересно, есть ли реальная польза от их добавления, или если они 'в лучшем случае избыточно.

Спасибо.

Answer 1

В некоторых случаях, когда у тега нет ожидаемой информации, например при использовании флажка для принудительного вызова состояний CSS, существует требование использовать атрибут aria-labelledby, в частности, для прохождения критерия успеха AA.

Это относится к WCAG 2.1, глава 3.1.2 - Язык деталей

Существует интересная вики о Использование ARIA для предоставления скрытых меток

Если у вас есть ожидаемая информация в ваших данных или резюме, тогда программа чтения с экрана не получит никакой выгоды от прочтения этой информации дважды.

Answer 2

Согласно ARIA в спецификациях HTML , элемент details имеет неявную роль group

Роль group определяется как «Имя от автора» в спецификациях ARIA , поэтому требуется элемент summary ИЛИ атрибут aria-label ИЛИ атрибут aria-labelledby.

<!-- simple use case with a summary -->
<details>
    <summary>View more details</summary>
    ...
</details>

<!-- This can be used with an empty summary if you just want the icon visually -->
<details aria-label="Details">
    <summary></summary>
    ...
</details>

<!-- or you can reference another element(s) -->
<div class="display: none" id="detailsfor">Details for</div>
<div id="myproduct">My product</div>
<details aria-describedby="detailsfor myproduct">
   ...
</details>

Пока вы используете собственные элементы HTML (details и summary) вы не хотите удивляться добавлению любого другого атрибута ARIA