使用咏叹调可扩展物品

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”），因此屏幕阅读器将自动更改其值。