Question

我有：

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

问题是，当错误在字段验证时动态显示时，错误会不停地读取而不只是一次。

如何使这项工作？我尝试过分配div role =＆＃39; region＆＃39;与aria-live =＆＃34;礼貌＆＃34;以及只是aria-live =＆＃34;礼貌＆＃34;它似乎没有起作用。

Answer 1

我对原因有所了解，但还没有解决方案。

我怀疑Angular在每个验证周期中至少完成这三件事中的一件：

从DOM中删除元素并重新添加
使元素不可见并再次可见
清除元素的文本并重新填充

使aria-live区域可见，在DOM中添加新区域或更新其内容都会触发浏览器/ OS的辅助功能API，从而导致Jaws再次读取内容。如果没有这些事件发生，Jaws会突然变得疯狂并反复阅读内容，没有其他原因。

对于后者，你可以使用aria-relavant属性，但是Jaws不能很好地支持它。无论如何，知道ngIf的本质，Angular可能是第一个，你不能阻止Jaws读取新出现的实时区域（无论是在DOM中添加还是通过CSS显示使其可见），因为它将是反对活区域的基本原则。

您可以尝试隐藏属性或CSS显示属性，而不是使用ngIf，但根据我的推理，我怀疑它会更好用。

所以，接下来的问题是：

如何验证我的推理是否确实正确/ Angular确实做了什么？
如果我正确地猜到了Angular的作用，我们怎么能阻止它在不应该的时候积极地更新元素呢？

我还没有足够的Angular 2经验来回答这两个问题。如果我有任何新闻，我会更新这个答案。

Answer 2

我有类似的问题。我尝试在不同的元素上实现aria-live和ngIf并为我工作。

以您的情况为准。以下代码可能有效

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

Aria Live Region继续进行Angular 2 ngIf验证

2 个答案: