Let's say I have an element with bindings in an Angular template like so,

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

The parent div has aria-live=polite so that screen readers know the child elements will update their content. The div has multiple children that all update their content based on the value of different variables. I want to ensure the indicated child div (the first one) is read through screen reader when it updates, and not the others. My question is what value of aria-relevant should be used in the child div? Acccording to the documentation, the options are additions,removals,text. It is my understanding that additions implies elements underneath the parent are added to the DOM, removal means elements are removed from the DOM and text means the text is removed or added,

I am unsure what exactly goes on under the hood when Angular binds to the template with {{}}. Does it actually remove the child element from the DOM and replace it with another? Or does it update the content of the child element? From the perspective of the screen reader, is there any difference between the two operations?

CodePudding user response：

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

Child elements that should not be announced really shouldn't be children of the live region. There isn't a "none" value for aria-relevant. I suppose if you used "removals" and then never removed any DOM elements from the child and only updated the text of the child, then nothing would be announced.

For child elements that should announce something, I have never tried setting aria-relevant or aria-atomic on the child element. I always have the element with aria-live also have aria-relevant or aria-atomic.