代码之家 › 专栏 › 技术社区 › Nitesh Rana

对可展开项使用aria

wai-aria css html javascript

Nitesh Rana · 技术社区 · 7 年前

div 元素,该元素在用户单击时展开。我如何通过屏幕阅读器访问它。

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

JS:

expandItem() {
  this.isCollapsed = true
}

变量 isCollapsed

1 回复 | 直到 7 年前

slugolicious 7 年前

我可能表现出对javascript的无知,但我还没有看到 (click)="expandItem()" 或 attr.aria-expanded="isCollapsed" 有 onclick="expandeItem()" 和 aria-expanded="false"

首先,你的 <div> 没有语义含义,因此需要几个ARIA属性来修复。但在你这样做之前,先考虑一下“ First Rule of ARIA Use ,这本质上是不使用ARIA。如果可能的话,首先选择原生语义HTML元素。

我需要更多关于你的场景的信息,但是考虑使用一个真实的 <button> 而不是 < . 听起来你可能有一个 disclosure widget ".

<按钮> 是不 <部门> 将需要:

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

推荐文章

Jun Yin · 如何修复“ARIA属性必须符合有效值”?

8 年前

bluePearl · 在没有JavaScript的情况下打开后,将键盘焦点放在modal上

9 年前

bawse · 角2和角4中的咏叹调可及性

9 年前

Taranjit Kang · Aria Live Region在Angular 2 ngIf验证中不断重复

9 年前

Semicolon · 2d x/y轴平面输入的适当aria角色和行为是什么?

9 年前

wscourge Kiran Balakrishnan · 可访问的隐藏文件输入

9 年前

martini449 · NVDA忽略具有role=“alert”的角度*ngIf块

9 年前

Andrew Pham · 为表格标题和免责声明添加WCAG 2.0 aria标签

10 年前

franenos · 可访问用户链接内的图像

10 年前

Michel · 为屏幕阅读器的元素(div)设置描述

11 年前