将 aria 用于可扩展项目

Question

我有一个可展开的 div 元素，当用户点击时它会展开。我怎样才能通过屏幕阅读器访问它。下面是我的代码

HTML

    <div class="expandable" (click)="expandItem()" attr.aria-expanded="isCollapsed">
    Some content to show on expand
</div>

JS:

expandItem() {
  this.isCollapsed = true
}

变量 isCollapsed 最初设置为 false。

Answer 1

我可能表现出我的 javascript 无知，但我以前没见过 (click)="expandItem()" 或 attr.aria-expanded="isCollapsed"。我看过onclick="expandeItem()"和aria-expanded="false"。但我暂时忽略这方面。

首先，您的 <div> 没有语义意义，因此您需要几个 ARIA 属性来解决这个问题。但在你这样做之前，请考虑“First Rule of ARIA Use”，这实际上是不使用 ARIA。如果可能，请使用原生语义 HTML 元素作为您的首选。

我需要有关您的场景的更多信息，但请考虑使用真实的 <button> 而不是 <div>。听起来你可能有一个“disclosure widget”。

如果未使用真正的<button>，那么您的<div>将需要：

tabindex="0"（允许键盘焦点移动到它）
点击处理程序（鼠标用户）
一个键盘处理程序（供键盘用户使用space和输入到select它）
a role="button" 所以屏幕 reader 宣布正确的语义
（我假设你的 <div> 有标签）

除此之外，您还需要解决 aria-expanded 问题。在按钮（或 div）的 onclick 中，只需切换 aria-expanded 的值。由于该属性是“state" (instead of a "property”），更改其值将由屏幕 readers 自动宣布。

将 aria 用于可扩展项目

using aria for expandable items

html

javascript

css

wai-aria