The Carousel ARIA Plugin makes it easy to use the WAI-ARIA Roles and States with the Carousel control. Using the ARIA plugin, a Carousel 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 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.
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:
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
the navigation element, and a
button to the
<a> elements that serve as paging controls.
A role of
listbox is applied to
<ol> inside the content element and a role of
option to each of its
The Carousel ARIA Plugin adds a
attribute to the Carousel class, each of which maps back to their respective ARIA property of
aria-describedby. When set,
each of these properties are applied to the same elements to which the roles of
listbox are applied (
<div class="yui-carousel-nav"> and
<div class="yui-carousel-content"> elements respectively) to help the user
associate the two elements with each other.
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.
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.