YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Container Family: Using the Container ARIA Plugin

# Container Family: Using the Container ARIA Plugin

The Container ARIA Plugin makes it easy to use the WAI-ARIA Roles and States with the Container family of controls. Using the ARIA plugin, Dialogs, Alerts and Tooltips created using the Container family are more interoperable with assistive technologies (AT), such as screen readers, making them 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.

Personal Information
First Name
Last Name
Email
Personal Information
First Name
Last Name
Email

## Getting Started

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

<!-- Source file --> <script type="text/javascript" src="../container/assets/containerariaplugin.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` configuration property to `true`. For example:

var oPanel = new YAHOO.widget.Panel("panel-1", { visible: false, fixedcenter: true, constraintoviewport: true, width: "300px", usearia: true });

## Plugin Features

### Enhancements to Module and Overlay

#### IFrames Automatically Hidden from AT

Both the Module and Overlay widgets make use of iframes — Module for the purpose of publishing the `textResize` Custom Event, and Overlay provides an iframe shim to prevent `<select>` from poking through Overlay instances. In both cases the iframe elements are hidden from the user using CSS. To ensure these iframes also remain hidden from AT, the Container ARIA Plugin sets the `role` attribute of each iframe to `presentation` and sets their `tabIndex` attribute to `-1`.

#### Visible State Communicated to AT

All Container widgets inherit a `visible` configuration property from Module. To ensure that the visible state is properly conveyed to AT, the Container ARIA Plugin automatically toggles the `aria-hidden` attribute to the correct value when the value of the `visible` configuration property is changed.

#### The `labelledby` and `describedby` Configuration Properties.

The Container ARIA Plugin adds a `labelledby` and `describedby` configuration properties to the Menu class, each of which maps back to their respective ARIA property of `aria-labelledby` and `aria-describedby`.

### Enhancements to Panel

The Container ARIA Plugin adds a `role` configuration property to Panel that is set to `dialog` by default. Authors using Panel (or any of its subclasses) to replace JavaScript alerts, should set the `role` configuration property to `alertdialog`. As an additonal convenience, the Container ARIA Plugin automatically sets the value of the `labelledby` configuration property to a Panel's header element.

The Container ARIA Plugin adds some keyboard enhancements to Panel: Pressing the Esc key will automatically hide a Panel instance, or in the case of Dialog, call the `cancel` method. Each Panel is also automatically registered with an OverlayManager instance, and listens for the DOM focus and blur events so that Panels are automatically focused and blurred accordingly by the OverlayManager. Lastly, when a Panel instance is hidden, focus is automatically returned to the element in the DOM that was focused before the Panel was made visible.

### Enhancements to Tooltip

The Container ARIA Plugin enhances Tooltip such that each DOM element defined as a Tooltip instance's trigger has its `aria-describedby` attribute automatically set to the Tooltip's id. Additionally, when a Tooltip is automatically shown and hidden as it's trigger(s) are focused and blurred.

### Enhanced Keyboard Support

In keeping with the WAI-ARIA Best Practices for keyboard navigation the ARIA plugin for Menu enhances Menu's default behavior such that only one MenuItem is in the browser's tab index, enabling the user to easily tab into and out of the Menu. When a MenuItem in a Menu has focus, pressing the arrow keys moves focus between each MenuItem in the Menu.

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

### YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

### Container Family Examples:

- The Module Control
- Creating and Positioning an Overlay
- Simple Tooltip Example
- One Tooltip, Many Context Elements
- Simple Panel Example
- Skinning a Panel with Custom CSS: Introduction
- Skinning a Panel with Custom CSS: Advanced
- Creating a Modal "Loading" Panel
- Creating a Resizable Panel
- Dialog Quickstart Example
- SimpleDialog Quickstart Example
- Using ContainerEffect Transitions
- Using the Overlay Manager to Manage Multiple Panels
- Implementing Container Keyboard Shortcuts with KeyListener
- Using the Button ARIA Plugin (included with examples for Button Control)
- Using the Container ARIA Plugin
- Using A Menu Button To Replace A <select> Element (included with examples for Button Control)
- Replacing the content of a Button's Menu (included with examples for Button Control)
- Example of Color Picker Built in a Dialog via JavaScript (included with examples for Color Picker Control)
- Layout inside a resizable Panel (included with examples for Layout Manager)
- Editor in a Dialog Control (included with examples for Rich Text Editor)
- Menu Buttons (included with examples for Button Control)
- Popup Calendar - Advanced (included with examples for Calendar Control)
- Showing, Hiding, and Reordering Columns. (included with examples for DataTable Control)
- Split Buttons (included with examples for Button Control)
- Simple Calendar Menu Button (included with examples for Button Control)
- Calendar Menu Button with Date on Button Face (included with examples for Button Control)
- Color Picker Button (included with examples for Button Control)
- Fixed Width Menu Button (included with examples for Button Control)
- OS-Style Programs Menu (included with examples for Menu Family)
- Application Menubar (included with examples for Menu Family)
- Slider Button (included with examples for Button Control)
- Complex Application (included with examples for Layout Manager)

### More Container Family 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