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

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

jaws-screen-reader wai-aria accessibility angular

Taranjit Kang · 技术社区 · 8 年前

<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 回复 | 直到 4 年前

TylerH Ash Burlaczenko 4 年前

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

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

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

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

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

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

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

TylerH Ash Burlaczenko 4 年前

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

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

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

推荐文章

Shtole · 我需要为<button>中的装饰性<svg>隐藏aria吗?

1 年前

gallium314 · 我应该使用什么HTML语义来访问自定义计算器的输出?

2 年前

Sheppard25 · 为什么按下Tab键后onBlur会触发onKeyDown?

2 年前

user2933998 · 通过程序更改动态文本,而不必转到“设置”

2 年前

Betulino · 一行中的多个表单字段是否具有良好的可访问性?

2 年前

Takeshi Tokugawa YD · 如何获取“pa11y”中的目标行号和列范围?

3 年前

Yoginath Sumanth · 如何解决PageSpeed Insights诊断可访问性的性能问题部分打问号

3 年前

GurpusMaximus · 如何使用Java PDFBox 2.0.8库创建可访问的PDF,该库也可以使用PAC 2工具进行验证?

8 年前

David Costa · 如何以编程方式在主屏幕之间滚动?

8 年前

Ian Boyd · 如何设置与TEdit控件关联的可访问名称?

8 年前