WebAIM - Web Accessibility In Mind

E-mail List Archives

tabbed interfaces - tricky question


From: Detlev Fischer
Date: Oct 30, 2018 8:59AM

I have a tricky question for tabbed interfaces / tab panel aficionados.

We know there are two different beasts, 1 and 2:

1. tabbed navigation - looks like tabs but is a menu going to other
section pages
Here, consensus is that tabbed interfaces with ARIA should not be used,
this is just a list of links in a nav

2. True tab panels / tabbed navigation (on one and the same page)
Here, people can opt for the implementation according to ARIA best
practices (tablist is one tab stop, then use arrow keys to navigate
between tabs, possibly make panel the next tab stop, or implement down
arrow for focusing panel); or have a mixed implementation where tabs can
be focused with both arrow keys AND the tab key (because this is what
many users expect)

Now there are implementations where you have something that *looks* like
a tab panel on one and the same page (i.e., *only* the content in the
panel and state of the tab list change, the rest of the page -- title,
other content -- stays exactly the same) BUT in fact activating tabs
loads up different pages that differ only in terms of the panel content.
What would be your recommendations for implementing such a panel? Should
it appear and behave like an ARIA panel even if it loads different pages
(possibly using the focus() method to set focus to the activated tab
after page load?) Unfortunately I cannot show the example that brought
up this queston since it is in a password-protected area of a customer's


Detlev Fischer PhD
DIAS GmbH - Daten, Informationssysteme und Analysen im Sozialen
Geschäftsführung: Thomas Lilienthal, Michael Zapp

Telefon: +49-40-43 18 75-25
Mobile: +49-157 57 57 57 45
Fax: +49-40-43 18 75-19

Anschrift: Haubachstr. 72, D-22765 Hamburg
Amtsgericht Hamburg HRB 58 167
Geschäftsführer: Thomas Lilienthal, Michael Zapp

Detlev Fischer
Werderstr. 34, 20144 Hamburg

Mobil +49 (0)157 57 57 57 45

Beratung, Tests und Schulungen für barrierefreie Websites

Diese E-Mail wurde von Avast Antivirus-Software auf Viren geprüft.