YUI Library Home

YUI Library Examples: Menu Family: Using the Menu ARIA Plugin

Menu Family: Using the Menu ARIA Plugin

The Menu ARIA Plugin makes it easy to use the WAI-ARIA Roles and States with each of the controls in the Menu family. Using the Menu ARIA Plugin, menus created with the Menu widget 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.

Getting Started

Using the Menu ARIA Plugin is easy. Simply include the source file(s) for the ARIA plugin after the Menu source files as indicated on the Menu landing page. (Note: Since the Container Core file is a dependency of Menu, the Container ARIA Plugin is also a dependency of the Menu ARIA Plugin.)

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

The labelledby and describedby configuration properties.

The Menu 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. For example:

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.

ContextMenu Support

The Menu ARIA Plugin enhances the ContextMenu widget such that any element defined as a ContextMenu instance's trigger will have the aria-haspopup property automatically applied to let users of AT know that the element has a context menu associated with it.

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.

Menu Family Examples:

More Menu Family Resources:

Copyright © 2011 Yahoo! Inc. All rights reserved.

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