WebAIM - Web Accessibility In Mind

E-mail List Archives

Navigating from tab to tab panel

for

From: Mark Magennis
Date: Sep 27, 2017 4:16AM

Hi everyone.

I've a question about how tabbed interfaces work with a screen reader. Usually, it seems, the tabs are in a list which is followed by a bunch of divs, each containing a tab panel. If so, when the user activates a tab and its panel opens, in order to get to the content (leaving aside the JAWS Ins+Alt+M shortcut as it's only JAWS), they have to arrow down through the remaining tabs first.

This seems unintuitive. It would seem more natural that when you open a tab, it's contents appear immediately after it, not with all the other tabs in between. So instead of this ordering:

Tab 1
Tab 2
Tab 3
Tab 1 panel
Tab 2 panel
Tab 3 panel

you would have this:

Tab 1
Tab 1 panel
Tab 2
Tab 2 panel
Tab 3
Tab 2 panel

In both cases, of course, only the open panel would be exposed.

I'm wondering has anyone tried to do it this way? Does anything think it's worth doing it this way, or is it likely to cause other usability problems? Should it just be accepted that the panels normally come after the whole tab list?

If anyone has done it this other way, then I'd be interested in seeing how. It seems it would involve placing the panel directly after the tab in the DOM, but because the tab is a list item, this would make the panel its child would it? Which sounds strange.

Thanks,
Mark

Mark Magennis | Accessibility Support Manager
InterAccess.ie <http://interaccess.ie/>; - Accessible UX