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.

Check out Dirk’s Really Accessible Tabs plugin.

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 tabs Jason 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.

Check out Jason’s Accessible ARIA tabs article.

jQuery Widget Samples: Tabs

Last but not least, we have the jQuery widget samples created by Hans Hillen of The Paciello Group (TPG). The Paciello Group have been working with AOL to enhance the accessibility of jQuery UI components such as slider, carousel and tabs. The enhancements made to jQuery UI components incorporates the W3C’s Accessible Rich Internet Application Specification and the Web Content Accessibility Guidelines 2.0. Hans’ enhancements will be fed into the jQuery UI core and will be available for all web developers to take advantage of.

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.

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.