javascript - 将 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" (允许键盘焦点移动到它)
• 点击处理程序(鼠标用户)
• 一个键盘处理程序(供键盘用户使用空格和输入来选择它)
• 一个role="button"所以屏幕阅读器会宣布正确的语义
• (我假设您的 <div> 有标签)

除此之外，您还需要解决您的 aria-expanded问题。在按钮(或 div)的 onclick 中，只需切换 aria-expanded 的值即可.由于该属性是“state”(而不是“property”)，更改其值将由屏幕阅读器自动宣布。