我可以覆盖细节摘要元素上的 ARIA 角色吗？

Question

因此，我将标题标签（h1、h2、h3、h4、h5、h6）包装在

<details>

和

<summary>

中。问题是他们默认失去了“标题”ARIA 角色。来自MDN 文档：

警告：由于该元素具有按钮的默认角色（这会剥夺子元素的所有角色），因此此示例不适用于屏幕阅读器等辅助技术的用户。遗嘱的角色已被删除，因此不会被视为这些用户的标题。

但是你不能通过如下重写来轻松解决这个问题吗？我问的原因是我在谷歌搜索中没有看到这个技巧，只是有很多关于细节摘要元素被破坏和无法修复的抱怨。所以也许我错过了一些东西。

<details>
  <summary role="heading" aria-level="2"><h2>Heading</h2></summary>
  Lorem ipsum...
</details>

Answer 1

/

元素是一个很好的语义元素，它为您提供了一些“免费”的内置可访问性，但正如您所注意到的，它确实有局限性。

本质上是一个。这是一个具有

aria-expanded

属性的按钮。如果您覆盖

的角色，那么它将不再作为按钮宣布，这意味着屏幕阅读器用户可能不知道它是一个交互式元素。

在

上听到“标题”会有点令人困惑，特别是因为内在的

aria-expanded

仍然被宣布。屏幕阅读器用户不会期望标题是可展开/可折叠的，因为标题不应该是交互式元素。

不建议覆盖元素的默认本机语义。也就是说，如果某个元素具有默认的

role

，请勿覆盖该角色。

ARIA使用的第二条规则说：

不要更改本机语义，除非确实必须这样做。

一个有趣的旁注是，元素的“内容模型

”表示可以在其中使用标题。

内容模型：短语内容，可选择与标题内容混合。

因此从技术上讲，您应该能够在

内包含标题，但并没有得到一致支持。 NVDA（PC 屏幕阅读器）

will 宣布嵌入 中的标题。它还会宣布在

中嵌入 ，尽管我强烈反对这样做。 JAWS（另一种 PC 屏幕阅读器）将

不会宣布嵌入 中的标题（或表格）。我认为这是一个 JAWS 错误，因为如上所述，

可以有标题。

总之（没有双关语），我不建议将标题或任何其他语义 html 元素放在

元素内。我不知道您的页面是如何组织的，但可能的替代方案是标题为

outside/before /

。

<h2>important stuff here</h2>
<details>
  <summary>normal text</summary>
  lorem ipsum
</details>