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.
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
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
usearia attribute to
true. For example:
Out of the box, TabView provides basic keyboard support. Each Tab in a TabView is represented by
<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.
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.
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.
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:
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.
Note: Logging and debugging is currently turned off for this example.