Aria 实时区域在 Angular 2 ngIf 验证时不断重复

Question

我有：

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

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

如何进行这项工作？我已经尝试分配 div role='region' with aria-live="polite" 以及 aria-live="polite" 并且它似乎没有工作。

Answer 1

我知道原因，但还没有解决方案。

我怀疑 Angular 在每个验证周期至少做以下三件事中的一件：

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

使 aria-live 区域可见，在 DOM 中添加一个新区域或更新其内容都会触发 browser/OS 的可访问性 API，从而导致 Jaws 读取再次内容。如果发生 none 这些事件，Jaws 会突然发疯并反复阅读内容，没有其他原因。

针对后一种，您可能会使用 aria-relavant 属性，但 Jaws 对它的支持不是很好。无论如何，了解 ngIf 的性质，Angular 可能会做第一个，并且您不能阻止 Jaws 读取新出现的活动区域（无论它是否已添加到 DOM 中或通过CSS 显示），因为这将违反实时区域的基本原则。

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

所以，接下来的问题是：

如何验证我的推理是否确实正确/Angular 确实做了什么？
如果我猜对了 Angular 的作用，我们如何才能防止它在不应该的情况下如此频繁地积极更新元素？

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

Answer 2

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

对于您的情况，此代码可能有效：

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

Aria 实时区域在 Angular 2 ngIf 验证时不断重复

Aria Live Region Keeps Repeating on Angular 2 ngIf Validation

accessibility

wai-aria

jaws-screen-reader

angular