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?

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.

Hope this helps.

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.