Search form

Accessible Tabs - Part 2: The Solution

As we saw in Accessible Tabs Part 1 - The Problem, there are several accessibility issues with tabs created for the web compared to those created for use in software applications. Tabs on the web should ideally replicate the functionality used in applications, so they are more intuitive for everyone. In this article we will look at three existing scripts for creating accessible tabs.

Really Accessible Tabs

Dirk Ginader's Really Accessible Tabs plugin is one that I came across a while ago when searching for accessible tab plugins for a personal project. Dirk wrote this script in 2009 because there wasn't an existing jQuery plugin for creating a tabbed interface that could be used by people using screen readers.

The main problem Dirk set out to address was the lack of feedback provided to people using screen readers when switching between tabs in the tabbed interface. People using screen readers would select a tab title to open, hit enter to open the current tab and then nothing would happen. Visually the new tab would appear, however the person using the screen reader would not be aware of this. Instead they may have thought the link (tab title) was broken as the keyboard focus was still on the title tab.

In his Really Accessible Tabs plugin, Dirk addressed this problem by providing feedback in the tabbed interface for people using screen readers. When someone using a screen reader opens a new tab, instead of the keyboard focus remaining on the tab title, the tab title acts as an internal page link and positions the keyboard focus in the content of the newly open tab. The script also adds the tab title in text inside the anchor element to confirm to a person using a screen reader that the keyboard focus has moved into the content of the tab rather than remaining on the tab title link.

Dirk's plugin is highly customisable allowing you to pass in many different configuration options such as the class names for the elements used in the tabs and different speeds and animations for switching between tabs. There numerous examples on his demos page showing the various features of the script and how to use them.

Accessible ARIA Tabs

Using an ARIA enabled tabbed interface addresses many of the problems commonly associated with tabs on the web. Using ARIA roles of 'tab' and 'tabpanel' allow the tabs to be operated using the arrow keys on a keyboard, display the associated tab content in the process. This replicates the functionality of tabs in software applications on the web.

In his article, Accessible ARIA tabsJason Kiss discusses many of the problems with tabs and screen readers. Jason has done a great deal of research into how ARIA enabled tabbed interfaces work with various different screen readers. His article discusses 3 different approaches towards ARIA enabled tabs noting the pros and cons for each method. Version 3b is probably the best implementation in terms of meeting accessibility requirements and ensuring the tabs can be accessed by people using various combinations of browsers and screen readers.

Jason notes that none of the versions listed provide a good experience for everyone using screen readers, especially those with older screen readers and suggests implementing ARIA enabled tabs only for browsers such as IE8 and Firefox 3. While this is a good idea in theory and may help avoid confusion for some people, it is not an ideal solution as keeping track of which browser versions you are supporting may increase the maintenance time required from your developers. As an alternative he suggests providing instructions on how to use the tabs for people using screen readers before the tab themselves.

In a similar vein to Jason's ARIA enabled tabs, Hans' accessible tabs example uses ARIA roles to make the controls of the tab obvious to people using screen readers. Roles and states are included to add proper semantics and metadata to the tabbed interface enabling people to easily switch between tabs using the arrow keys.

Hans' modifications to jQuery UI will be released in version 1.9. In the meantime check out his demo page of jQuery Widget Samples.

jQuery Widget Samples: Tabs

Conclusion

At the time of writing the three scripts we've looked at for this article are the best scripts available for creating accessible tabs by a considerable margin. However each has its own pros and cons. While it is possible to create accessible tabs for the web which function in the same ways as those in software applications, it is worth keeping in mind that not everyone will be able to use ARIA enabled tabs and may instead require something simpler. Your project requirements and your users will ultimately determine which script is suitable for your project.

Share this article

Article tags

About the Author

7comments

Submitted by ecoward on Mon, 11/04/2011 - 18:40

Hi Zoe,

The Open Ajax Alliance script looks very good to me, certainly another one to add to the list! With this script and Hans' script you can move to the tab content from the tab menu by pressing the 'tab' key when using either Jaws or NVDA. This should put Jaws into forms mode and NVDA into application mode, in which you will then be able to use the tabs as you would in an application e.g. by using the arrow keys. I have a feeling you aren't in application mode when trying to reach the content in each tab.

When we were testing the different tab interfaces we did find that using the 'say all' command didn't work very well on both the OAA script and Hans Hillens examples. But this could possibly be a bug with Jaws rather than with the tabs script.

Dirk's example works slightly differently to the other examples provided in the article. For screen reader users the experience of using his tabs works more like showing and hiding content. In order to read the tab content you have to hit 'enter' on the tab itself. This should then move the keyboard focus into the tab content.

With both the OAA and the Hans Hillen tabs, I've never been able to figure out a way to move from the tab directly to the start of the tab panel content, which is a big problem. Could you do this with the Hans Hillen tabs, Emily? If so, what keyboard command did you use to get the screen readers to move to the top of the tab panel and start reading?

I just tested the simple example of Dirk's tabs (http://blog.ginader.de/dev/jquery/tabs/1.7/simple.php) and couldn't get NVDA or JAWS to read out the content of the current tab panel either. I tried using Tab, Enter, and the "say all" command, and none of them worked.

Thanks for the great Article. I think your Conclusion is exactly right. Depending on the project requirements each of the solutions might me the best. Hopefully in the future ARIA will be supported on every Browser/Screenreader combination so my solution will no longer be needed :-)

I hadn't come across TabInterface.js before but it certainly looks like one that could be added to this list. From having a quick look it certainly works in the desired way with a keyboard and has all the appropriate ARIA roles.