Screen reader instructions for Tab component

We use NVDA within the company and so we test our accessibility on new Evolve courses using the NVDA screen reader. We have developed instructions for how to use the reader for various different components including multiple choice and multiple select questions. But I am baffled as to how to use keyboard commands to read the content within a Tab. I can navigate from Tab title to the next Tab title, but I cannot get the reader to read the text on the tab without using my mouse. What is your suggestion?

Hey @hartpal - Installed NVDA for a bit of testing recently, so might be able to answer your question.

The Tab keyboard commands only cycle through interactive elements on a page and hop over the static ones. To move through non-interactive elements (like text) using keyboard commands and the NVDA screenreader you use the up/down arrows on the keyboard. If you find that’s only reading one line at a time, you’ll need to use the [NVDA key] + [arrow key] on the keyboard. I think the NVDA key is ‘Insert’ by default but you can change it.

I guess it is a bit weird if the focus/tab order doesn’t automatically move the focus to the body text associated with each tab because it’s quite easy to get lost switching between tab and up/down arrows in that way.

It might be helpful if authors could specify the tab order in a component/page so there’s more control. Perhaps this is something that will be picked up in a future release by Evolve.

1 Like

Hi both, Ruppers is right in that arrow key-ing through the content is the best way to access everything on screen. You should be able to access all content in a tab component that way.

We have actually just completed some work on the Tab component to improve the experience, and this will be released soon amongst a whole range of accessibility improvements, so please keep an eye out for that. We are hoping to release either this or next month (it will be listed in the release notes that appear when Evolve is updated)

Cheers-Sam

1 Like

Looking forward to the updates. However, when we tested the Tab components the arrow keys NEVER accessed the actual content of the Tabs. It would read the heading of a tab, but using the down arrow only pushed it to the next Tab. We tried all the usual commands and all the arrow keys. We could only access the content by clicking with the mouse on the actual tab.

Hi @hartpal
I can see there are problems navigating with NVDA, and I can confirm these are definitely addressed in the upcoming update. I know that doesn’t help you right now, but it definitely will be resolved soon.
Thanks-Sam

1 Like

Hi @Sam_Cook_Evolve_QA I’m looking forward to seeing the update for the Tab component.

I use Windows Narrator for my initial testing (as it’s easy to use and already installed on my machine).

When I try to listen to a Tab component I cannot select any other tab, so only the first tab can be heard.

I know Windows Narrator is little used at the moment, but I can see it moving up the ranks as I think it works really well now.

1 Like

@BarryBPS I have used narrator before, but not for a fair while. We have a ton of accessibility improvements being prepared currently, so hopefully the accessible experience is going to be greatly improved across the board. I test with JAWS, NVDA and VoiceOver currently. To my knowledge, we haven’t had any Windows narrator-specific issues raised by our clients in the time I have been testing Evolve.

1 Like

Thanks Sam.

I’ll look forward to future updates.

I only use Windows Narrator for my initial testing as it’s quick and straightforward for me to use. It isn’t part of our proper testing requirements so it’s nothing to worry about. I read earlier in one particular survey that only 0.4% of screen reader users use Windows Narrator.

I, along with our QA team use NVDA and JAWS when it comes to the proper tests.

1 Like