时间戳

首页 > 解决方案 > 将 aria 用于可扩展项目

javascript - 将 aria 用于可扩展项目

问题描述

我有一个可展开的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。

标签： javascripthtmlcsswai-aria

解决方案

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

首先，你<div>没有语义意义，所以你需要几个 ARIA 属性来解决这个问题。但在您这样做之前，请考虑“使用 ARIA 的第一条规则”，它本质上是不使用 ARIA。如果可能，请使用本机语义 HTML 元素作为您的首选。

我需要有关您的方案的更多信息，但请考虑使用 real<button>而不是<div>. 听起来您可能有一个“披露小部件”。

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

  • tabindex="0"（允许键盘焦点移动到它）
  • 点击处理程序（用于鼠标用户）
  • 键盘处理程序（供键盘用户使用space和enter选择它）
  • arole="button"所以屏幕阅读器会宣布正确的语义
  • （我假设你<div>有一个标签）

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

推荐阅读