YUI recommends YUI3.

YUI 2 has been deprecated since 2011. This site acts as an archive for files and documentation.

This documentation is no longer maintained.

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.

Personal Information
Personal Information

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.

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:

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.

YUI Logger Output:

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

Reload with logging
and debugging enabled.

Container Family Examples:

More Container Family Resources:

Copyright © 2013 Yahoo! Inc. All rights reserved.

Privacy Policy - Copyright Policy - Job Openings