Reputation: 382
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?
Upvotes: 5
Views: 9300
Reputation: 24825
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)
Upvotes: 6