WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Are these accessible tabs?

for

From: Celeste Mackintosh
Date: Mar 1, 2011 7:09PM

Hi Jason,

This is really helpful - thank you!

Celeste

-----Original Message-----
From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of Jason Kiss
Sent: Tuesday, March 01, 2011 1:33 PM
To: <EMAIL REMOVED>
Subject: Re: [WebAIM] Are these accessible tabs?

Celeste,

In terms of the tabbed interface at uxmovement.com, some things I notice are the following:

1. As a sighted user, I find it difficult to quickly, upon glancing at it, determine the boundaries of the tabbed interface, that is, what content is part of the associated tab's panel, and what is not. Perhaps something like a simple border around the tab links and tab panel content to visually contain them would help.

2. A screen reader will announce the tab links as same-page anchors. The default behaviour expected for these is that clicking one of them will move focus to the associated content on the page, but this doesn't happen here. Instead, focus remains on the tab link that was selected.
This is a common issue with many tabbed interfaces. Since the tab links simply show and hide content, it will not be clear to a screen reader user that the content has changed; and because focus remains on the tab link, the screen reader user will have to navigate down the page, possibly through other tab links, to get to the newly visible content.
There is also no non-visual indication of which tab link is currently selected, so it will not be immediately clear to a screen reader user what tab link the current tab panel content relates to.

Dirk Ginader has a post describing some of these issues:
http://blog.ginader.de/archives/2009/02/07/jQuery-Accessible-Tabs-How-to-make-tabs-REALLY-accessible.php.


He also provides a good jQuery-based plugin for accessible tabs that you may want to look at (https://github.com/ginader/Accessible-Tabs). Using it would require some minor changes to the structure of your tabbed interface content, but they would go a long way to making it accessible.
Notably, you would need to provide some heading text for each of the tab panels, but this heading is positioned offscreen so that it need not interfere with the presentation to sighted users, though it will still be available to assistive technologies. The heading is important as focus is programmatically moved to it when a tab link is clicked, thus allowing screen reader users to start reading the content that they think they just moved to by activating the tab link.

Ginader's plugin also allows you to add hidden text, e.g., "Current Tab:", to the selected tab link so that screen reader users can readily figure out which tab is currently selected.

Implementing WAI-ARIA is also another option, but support for it is still fairly limited among many assistive technology and browser combinations currently in use. So if you are looking to maximise the tabs' accessibility to the most users, I suggest that something like Ginader's plugin is your best bet.

Regarding the use of display:none, it is quite appropriate in this case since the unselected tab panels are not supposed to be available at all.
If, for example, they were simply positioned offscreen, and they contained focusable links, then a sighted keyboard user could easily get confused since pressing the TAB key would set focus to those links, but they would not be visible on the page. Similarly, a sighted screen reader user might wonder where all the content of these hidden tab panels is when it is being read by the screen reader. There's a related article on this at http://simplyaccessible.com/article/better-for-accessibility/.

Hope this helps.

Jason

--
Jason Kiss
Web: www.accessibleculture.org
Email: <EMAIL REMOVED>
Twitter: @jkiss


On 01/03/11 11:52, Celeste Mackintosh wrote:
>
> Hi everyone,
>
> Can anyone help with a test or advice? They're here:
> http://uxmovement.com/
>
> (On the right hand side of the page)
>
> I think I'm quite confused about when display:none is an issue for
> screenreaders - these are focusable links, so would this be okay?
>
> (Newbie alert! :))
>
> Many thanks,
>
> Celeste