YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Carousel Control: Using the Carousel ARIA Plugin

# Carousel Control: Using the Carousel ARIA Plugin

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.

View example in new window.

## 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.

### Carousel Control Examples:

- Spotlight example
- Circular Carousel example
- Partially revealing previous and next items
- Using both images and text within an item
- Using Ajax for deferred loading of items
- Using deferred loading of items and Carousel's built-in paginator
- Multi-row example
- Pagination template example
- Using Paginator with Carousel
- Using the Carousel ARIA Plugin

### More Carousel Control Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2010 Yahoo! Inc. All rights reserved.

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