CODEWITHSUNDEEP
javascriptaccessibilitynvda
Rakshith R
Rakshith R

Reputation: 1

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

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

Problem Area:

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.

Upvotes: 0

Views: 1776

Answers (1)

brennanyoung
brennanyoung

Reputation: 6524

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).

Upvotes: 1

Related Questions