将 aria-live/aria-relevant 应用于 Angular 数据绑定的正确方法是什么？

Question

假设我在 Angular 模板中有一个带有绑定的元素，

<div role="region" aria-live="polite">
    <div aria-relevant="?">
        {{ someVariable }}
    </div>
    <div>
        {{ someOtherVariable }}
    </div>
    <!-- more dynamic content below -->
</div>

parent div 有 aria-live=polite 以便屏幕 reader 知道 child 元素将更新它们的内容。 div 有多个 children，它们都根据不同变量的值更新它们的内容。我想确保指示的 child div （第一个）在更新时通过屏幕 reader 读取，而不是其他。我的问题是 aria-relevant 应该在 child div 中使用什么值？根据documentation，选项为additions、removals、text。据我了解，additions 意味着 parent 下的元素被添加到 DOM，removal 意味着元素从 DOM 和 [=16= 中删除] 表示删除或添加文本，

我不确定当 Angular 使用 {{}} 绑定到模板时到底发生了什么。它实际上是否从 DOM 中删除了 child 元素并将其替换为另一个元素？还是更新 child 元素的内容？从屏幕上看reader，这两种操作有什么区别吗？

Answer 1

I want to ensure the indicated child div (the first one) is read through screen reader when it updates, and not the others.

应该不公布的子元素确实不应该是活动区域的子元素。 aria-relevant 没有 "none" 值。我想如果您使用了 "removals" 然后从未从子项中删除任何 DOM 元素并且只更新了子项的文本，那么什么都不会公布。

对于应该声明某事的子元素，我从未尝试在子元素上设置aria-relevant或aria-atomic。我总是有 aria-live 的元素也有 aria-relevant 或 aria-atomic.

将 aria-live/aria-relevant 应用于 Angular 数据绑定的正确方法是什么？

What is the proper way to apply aria-live/aria-relevant to an Angular data binding?

html

wai-aria

angular