How can screen readers like NVDA automatically read an element that goes from display: none to block? Aria-live not working well

Question

I have a complex multi-column form that the NVDA screen reader reads perfectly well after the page loads, including aria-labels, fields, order of elements, etc. In this working scenario, the form is fully visible when the page loads.

However, I need to hide this form by default when the page loads. This form should only appear if the user clicks a "Show form" link on the page, setting the form from "display: none" to "display: block".

By default, the reader won't automatically read the form after I click "Show form".

So I added aria-live="polite" to the form. The reader will read the form when I click the "Show form" link, but the reading is very poor - things gets mixed, aria-labels get ignored, the reading flow breaks, etc.

So my question is, using a screen reader like NVDA, how do I get a clean and accurate reading of an element that goes from display: none to display: block (based on some user interaction) after the page is loaded?

As I mentioned above, I get a perfect reading only if the form is visible when the page loads.

Answer 1

Aria live regions are only read in two occasions:

• When they are added in the DOM
• When their content changes

IN all other cases, it isn't officially specified if they must be read or not. They are with some browsers + screen readers combinations, but not with some others.

IN any way, it isn't a good idea to read an entire form section.

If the user can quite well expect something to appear, it's much more important to make it naturally reachable, than to announce the fact that it appeared. By naturally reachable, I mean both by tab and by browser cursor commands like arrow keys or navigation from form element to form element. In particular, it means that you should for example avoid adding new content at the end of the body, but rather add it in the DOM where it is really expected instead.

Once this is correctly done, at that moment you may think about announcing that the form section appeared. You shouldn't make the whole new section being read, but stick to a simple general message, like "Personal information section appeared below general information". This kind of message has to be in an aria live region. If that form section appears quite unexpectedly from the user point of view, this announcement can be really useful. If what happens is quite expected, that announcement is relatively optional, if you have made it appear at the right place.