WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: tabbed interfaces - tricky question

for

From: Patrick H. Lauke
Date: Oct 30, 2018 9:01AM

On 30/10/2018 14:59, Detlev Fischer wrote:
> 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
> site.

Treat it still like a navigation (1. in the above example), as i'd
suspect the whole roundtrip of loading a new page, setting focus, etc
will be slower than the expected immediacy of a true tab panel - and
users may also be confused by the fact it does a page load (e.g. if
their AT announces that a load happened)

P
--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke