NVDA reads all modal content after reading the focused element in modal dialog

Question

I have implemented a requirement to focus the first tab(basically an <a> element) present inside the modal dialog.

When using NVDA screen reader to test the feature, it is observed that after reading dialog label and description (pointed by aria-labelledby and aria-describedby) it reads the focused tab element. However, after that it continues on to read the entire modal dialog content starting with modal heading. This is not the desired reading behavior we want.

If we put focus on the first input element inside the modal dialog, instead of the tab(<a>) element, it works fine. NVDA pauses after reading the focused input element. Further elements are read out only when we navigate using tab key. This is the desired reading behavior we want, but we don't want to focus the input element.

Demo link can be found here : https://codepen.io/kaashan/pen/KOmGYe . The code used is from W3.org accessibility guidelines for modal dialogs with minor modifications to display tabs and focus the first tab element on modal open.

I am using NVDA2019.1.1 version with latest version of Chrome and Firefox browser for my tests.

Could someone help to explain what should be done to pause the NVDA after it has read the focused tab(<a>) element?

Hymnology

Answer 1

You have misunderstood how NVDA is used.

The behaviour you have tried to stop is the INTENDED behaviour and allows a user to see what a form contains and get an understanding of what they are about to fill out.

Do not try and get NVDA to work how you want it to work.

Just follow best practices (as you have done) and let the user worry about how they want the reader to function.

It is hard to fully test something out of context but within the example you have given you seem to be on the right track.

Two things to check (within the document you are using this within)

1. The modal does not read content hidden behind tab 2 and does not read any other page content when open, it should stop after reading the whole modal content.
2. You can close the modal with the Escape key.

Highway

Thanks Graham for your time and suggestion on this topic. My expectation was to provide a uniform accessibility experience to a user, irrespective of the screen reader software they use. So, with my current implementation and using JAWS screen reader, the behavior was as per my expectation (taking a pause after announcing focused element and reading further modal content on tab key navigation). But the behavior was different with NVDA and hence I thought there might be a way to get similar reading behavior. Unfortunately, there is not a way as I explored more about this problem. – Hymnology

Providing a "uniform accessibility experience" might sound desirable but it is not. It's like making a website pixel perfect and look the same in all browsers. It's neither possible nor necessary. Screen readers can be vastly different from each other and users tend to change a lot of settings. It is pretty much impossible to provide the same experience, so I would advise to forget about that idea. – Sardinian

spot on selfthinker. Glad I could help Kaashan, hope the project is going well :-) – Highway

Answer 2

I was able to resolve the issue after I implemented the tabs inside dialogs as per accessibility guidelines mentioned here. I noticed that just marking the <a> with role=tab attribute does the job to solve the problem with NVDA.

Hymnology