The Web and Media Accessibility Group AMA πŸŽ‰

View other answers to this thread
Matt Kreiling's photo

Are there ever occasions when a non-interactive element should be in the tab order?

In testing output from a popular eLearning software, I found that the method for providing text (rendered as images) was to add aria-labels and then make different parts of the markup focusable and tabbable so screen-reader users could tab to the content to hear it read.

Also, I cannot find anywhere in WCAG which says that non-interactive elements should not be in tab order.

Show +2 replies
Matt Kreiling's photo

It is an Articulate eLearning module. There are many issues with it, but as I work with the eLearning developers to remediate them, I want to be clear about why making non-interactive elements tabbable is inappropriate. I am assessing the modules using Accessibility Insights Tatiana Mac

Tatiana Mac's photo

Matt Kreiling Thanks for that context! Great to hear you have an accessibility checker.

I think that it would be helpful to test the module with various assistive technologies to show how the screenreader will read the information and how a keyboard will navigate it (if you're not doing that already). Most of the time, the user should not have to tab to the element in order for it to be readβ€”and keyboards are more than tab. Focus should be reserved for when the user needs to interact with that element, like links and opening closing modules.

Generally speaking, if you're using semantic markup, the correct elements will be focusable and the reading/tab flow will be handled by going in linear order, which is expected and good. I don't use Accessibility Insights myself so I'm not sure if it has a feature that can visualise the tab order for you, which I find helpful if I ever am forced to manipulate.

I hope that helps? Happy to answer any specific questions with more context as I can.