YUI Library Home

YUI Library Examples: TabView Control: Using the TabView ARIA Plugin

TabView Control: Using the TabView ARIA Plugin

The TabView ARIA Plugin makes it easy to use the WAI-ARIA Roles and States with the TabView control. Using the ARIA plugin, a TabView is more interoperable with assistive technologies (AT), such as screen readers, making it more accessible to users with disabilities.

Watch a screen cast of this example running in Firefox 3 with the NVDA screen reader, to see immediately the benefits that ARIA provides, or download the latest development snapshot of NVDA to test this example for yourself.

Browser News

Getting Started

Using the TabView ARIA Plugin is easy. Simply include the source file(s) for the ARIA plugin after the TabView source files as indicated on the TabView landing page.

All YUI ARIA Plugins require the user's browser and AT support the WAI-ARIA Roles and States. Currently only Firefox 3 and Internet Explorer 8 have support for ARIA, and are supported by several screen readers for Windows that also offer support for ARIA. For this reason the YUI ARIA Plugins are only enabled by default for these browsers. To enable the ARIA plugin for other browsers, simply the set the usearia attribute to true. For example:

Plugin Features

The labelledby and describedby attributes.

The TabView ARIA Plugin adds a labelledby and describedby attribute to the TabView class, each of which maps back to their respective ARIA property of aria-labelledby and aria-describedby.

Enhanced Keyboard Support

Out of the box, TabView provides basic keyboard support. Each Tab in a TabView is represented by an <A> element that enables the user to press the tab key or shift-tab to move focus between each TabView. In keeping with the WAI-ARIA Best Practices for keyboard navigation the ARIA plugin for TabView enhances TabView's default behavior such that only one Tab is in the browser's tab index, enabling the user to easily tab into and out of the TabView. When a Tab in a TabView has focus, pressing the arrow keys moves focus between each Tab in the TabView.

Mac vs. Windows

There are two different models for arrow key support for tabbed-content controls in operating systems: Mac OS X and Windows. On Windows, pressing the left or right arrow key moves focus to the next Tab and immediately displays its corresponding TabPanel. On the Mac with VoiceOver enabled, the arrow keys only move focus between each Tab and the user must press the space bar to load the content of the Tab's corresponding TabPanel. The ARIA plugin for TabView implements the Mac's model, as it is better for a DHTML TabView. Since as Tab's content can be loaded via XHR, the Mac's more intentional Tab selection model helps prevent the user from making requests for data he/she is not interested in consuming.

Supporting Multiple Orientations

The orientation attribute of the TabView is used to render the Tabs on any of the widget's four sides. To provide arrow key support that will work regardless of the orientation of the Tabs, the left and up keys will move the focus to the previous Tab, while the right and down arrow keys will move the focus to the next Tab. As an additional convenience to the user, focus is automatically moved to the first or last Tab when the user has reached the beginning or end of a list of Tabs.

Example-Specific Tweaks

First we'll use the labelled attribute to provide some helpful instructional text that will be announced to the user when the TabView initially receives focus. Since each Tab's content is loaded asynchronously, we'll also leverage WAI-ARIA Live Regions to message the user when a Tab's content is both being loaded and has finished loading. The following code snippet illustrates how it all comes together:

Screen Reader Testing

Two of the leading screen readers for Windows, JAWS and Window-Eyes, support ARIA. Free, trial versions of both are available for download, but require Windows be restarted every 40 minutes. The open-source NVDA Screen Reader is the best option for developers as it is both free and provides excellent support for ARIA.

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings