WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: tabbed interfaces - tricky question

for

From: Isabel Holdsworth
Date: Oct 30, 2018 9:47AM

A developer asked me the same question this morning, and we came to
the same conclusion.

I'd find it very confusing, as a screenreader user, if I pressed an
arrow key to view a different tab panel and the focus was changed.
Even if it was put back to the tab that initiated the change, JAWS
would come out of, and possibly back into, forms or application mode,
which would be confusing and frustrating.

On 30/10/2018, Patrick H. Lauke < <EMAIL REMOVED> > wrote:
> 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
> > > > >