代码之家 › 专栏 › 技术社区 › Taranjit Kang

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

jaws-screen-reader wai-aria accessibility angular

Taranjit Kang · 技术社区 · 7 年前

<div aria-live="polite" id="signInIdError" 
  *ngIf="!signInId.valid && (signInId.touched || isSubmitted)"
  class="inline-validation critical">
    <p>{{ "FYPVERROR" | translate }}</p>
</div>

问题是,当错误在字段验证时动态显示时,错误会被不间断地读取,而不仅仅是一次。

如何做到这一点?我试着用aria live=“little”和aria live=“little”分配div role='region',但似乎不起作用。

2 回复 | 直到 3 年前

TylerH Ash Burlaczenko 3 年前

我知道原因,但还没有解决办法。

从DOM中删除元素并再次添加
使元素不可见并再次可见

使aria live区域可见、在DOM中添加新区域或更新其内容都会触发浏览器/操作系统的可访问性API,从而导致Jaws再次读取内容。如果这些事件都没有发生,那么Jaws会突然发疯并反复阅读内容,这是没有其他原因的。

与后一个相反,您可以使用aria relavant属性,但Jaws不太支持它。无论如何,知道ngIf的本质后,Angular可能会做第一个,你不能阻止Jaws读取新出现的活动区域(无论它是添加到DOM中还是通过CSS显示可见),因为这违反了活动区域的基本原则。

您可以尝试使用隐藏属性或CSS显示属性,而不是使用ngIf,但通过我上面的推理,我怀疑它会更好地工作。

如果我猜对了Angular的功能,我们如何防止它在不应该的情况下如此频繁地更新元素?

我还没有足够的经验来回答这两个问题。如果我有任何消息,我会更新这个答案。

TylerH Ash Burlaczenko 3 年前

aria-live 和 ngIf 在不同的元素上为我工作。

在您的情况下,以下代码可能有效:

<div id="signInIdError" class="inline-validation critical" 
*ngIf="Condition"> <p aria-live="polite"> Some Text </p>
</div>

推荐文章

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

7 年前

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

7 年前

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

7 年前

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

7 年前

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

7 年前

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

7 年前

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

8 年前

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

8 年前

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

9 年前

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

9 年前