将 aria 属性添加到详细信息元素

Question

使用<details>和<summary>元素时，是否需要添加任何 aria 属性以实现可访问性？或者，换句话说，添加任何 aria 属性会以某种方式增强元素的可访问性吗？我在想aria-expanded、aria-pressed、aria-role等。

我知道细节是一个语义元素，但我想知道添加它们是否有任何真正的好处，或者它们充其量是多余的。

谢谢。

Answer 1

根据 HTML 规范中的 ARIA，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属性

Answer 2

在少数情况下，如果标签没有预期的信息，例如使用复选框强制CSS状态，则需要使用aria-labelledby属性来通过AA成功标准。

这属于WCAG 2.1第3.1.2章 - 部件语言

有一个关于使用 ARIA 提供隐藏标签的有趣维基

如果您的详细信息或摘要中确实有预期的信息，则屏幕阅读器将不会从阅读该信息两次中获得任何好处。