Control the screen reader - Make screen reader to read when a particular element has rendered

Question

I'm working on a simple application and I want it to make it accessible through screen readers.

Problem Area :

• Screen Readers on web pages Actual Behaviour: I see that the screen reader waits for the page to load completely (excluding the dynamically generated elements) and then it starts reading from top to bottom

What I expect : I want the screen reader to start reading based on a condition say after a div gets injected dynamically.

I have tried a multiple ways to make the content accessible using aria-live, aria-busy, focus() methods.

My code is as below:

<div><h1>NVDA TEST</h1></div>
<iframe src="http://localhost:3000" title="iframe" style="height: 500px; width: 100%;"></iframe>
<footer>
    <span>Hello Company</span>
    <span style="float: right">Terms and conditions Apply</span>
</footer>

I want the above behavior to be implemented in a bigger application. Thank you in advance.

Answer 1

The attribute you are supposed to use if you want to control what ends up in (or rather, what is excluded from) the accessibility tree is aria-hidden .

Have you tried wrapping the content you want to hide with aria-hidden="true" , and then remove the attribute at the moment you want to reveal the content?

At some point there's going to be an html attribute called inert which will be best practice for this kind of thing at some point. It's not fully standardised yet, but you can use it with a polyfill . (Please inspect the first of the use cases mentioned in the linked document - I think it is very close to what you need).