Getting Started

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

<!-- Source file --> <script type="text/javascript" src="../carousel/assets/carouselariaplugin.js"></script>

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:

var oTabView = new YAHOO.widget.Carousel({ usearia: true });

Plugin Features

Currently there is no ARIA role of carousel, however there are several ARIA roles applicable to the HTML elements that compose a Carousel widget can be used that further enhance its accessibility. A Carousel widget is composed of two primary elements: a content element (<div class="yui-carousel-nav">) that contains a list of items, and a navigation element (<div class="yui-carousel-content">) that contains several buttons that control the items currently in view. The Carousel ARIA Plugin applies the ARIA role of toolbar to the navigation element, and a role of button to the <a> elements that serve as paging controls. A role of listbox is applied to the <ol> inside the content element and a role of option to each of its child <li> elements.

The labelledby and describedby attributes.

The Carousel ARIA Plugin adds a labelledby and describedby attribute to the Carousel class, each of which maps back to their respective ARIA property of aria-labelledby and aria-describedby. When set, each of these properties are applied to the same elements to which the roles of toolbar and listbox are applied ( the <div class="yui-carousel-nav"> and <div class="yui-carousel-content"> elements respectively) to help the user associate the two elements with each other.

var oTabView = new YAHOO.widget.Carousel({ usearia: true, labelledby: "tabview-label" });

Enhanced Keyboard Support

In keeping with the WAI-ARIA Best Practices for keyboard navigation, the Carousel ARIA Plugin modifies Carousel's default keyboard support such that the Carousel has two primary tab stops: one for the navigation element, and one for the content element. After the user tabs into the Carousel's navigation or content element, pressing the arrow keys moves focus between each of the buttons or items.

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.