YUI Library Home

Site Search (YDN & YUIBlog):

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

View example in new window.

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

<!-- Dependency --> <script type="text/javascript" src="../container/assets/containerariaplugin.js"></script> <!-- Source File --> <script type="text/javascript" src="../menu/assets/menuariaplugin.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 oMenu = new YAHOO.widget.Menu("menu-1", { usearia: true });

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

var oMenuBar = new YAHOO.widget.MenuBar("menubar-1", { labelledby: "menubar-label" });

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

### Menu Family Examples:

- Basic Menu From Markup
- Basic Menu From JavaScript
- Grouped Menu Items Using Markup
- Grouped Menu Items Using JavaScript
- Grouped Menu Items With Titles From Markup
- Grouped Menu Items With Titles From JavaScript
- Multi-tiered Menu From Markup
- Multi-tiered Menu From JavaScript
- Handling Menu Click Events
- Listening For Menu Events
- MenuItem Configuration Properties
- Setting Menu Configuration Properties At Runtime
- Website Left Nav With Submenus Built From Markup
- Website Left Nav With Submenus From JavaScript
- Website Top Nav With Submenus Built From Markup
- Website Top Nav With Submenus From JavaScript
- Website Left Nav Using Animation With Submenus Built From Markup
- Website Left Nav Using Animation With Submenus From JavaScript
- Website Top Nav Using Animation With Submenus Built From Markup
- Website Top Nav Using Animation With Submenus From JavaScript
- Context Menu
- Adding A Context Menu To A Table
- Adding A Context Menu To A TreeView
- OS-Style Programs Menu
- Application Menubar
- Using the Menu ARIA Plugin
- Using the Button ARIA Plugin (included with examples for Button Control)
- Context Menu Integration (included with examples for DataTable Control)
- Menu Buttons (included with examples for Button Control)
- Split Buttons (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)
- Slider Button (included with examples for Button Control)
- Layout with Menu Controls (included with examples for Layout Manager)
- Using the ProfilerViewer API while Profiling the YUI Menu Control (included with examples for ProfilerViewer Control (beta))

### More Menu Family Resources:

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

Copyright © 2008 Yahoo! Inc. All rights reserved.

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