YUI Library Home

Site Search (YDN & YUIBlog):

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

# Button Control: Using the Button ARIA Plugin

The Button ARIA Plugin makes it easy to use the WAI-ARIA Roles and States with the Button and ButtonGroup controls. Using the ARIA plugin, Buttons 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.

Pizza Toppings
Radio Buttons
Size
Menu Button
Split Button

## Getting Started

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

<!-- Source file --> <script type="text/javascript" src="../button/assets/buttonariaplugin.js"></script> <!-- OPTIONAL: Menu and Container ARIA Plugin files (required for creating Buttons of type "menu" and "split") --> <script type="text/javascript" src="../container/assets/containerariaplugin.js"></script> <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` attribute to `true`. For example:

var oButton = new YAHOO.widget.Button({ type: "checkbox", usearia: true, label: "A Checkbox", name: "checkbox-1", value: "1", container: document.body });

The same is true of the `ButtonGroup` widget:

var oButtonGroup = new YAHOO.widget.ButtonGroup({ name: "radiogroup-1", container: document.body, usearia: true }); oButtonGroup.addButtons([ { label: "Radio 1", value: "1" checked: true }, { label: "Radio 2", value: "2" }, { label: "Radio 3", value: "3" }, { label: "Radio 4", value: "4" } ]);

## Plugin Features

### More Accessible Radio Buttons and Checkboxes

All Buttons (with the exception of those of type `link`) created using the Button widget are represented in HTML using the `<button>` element. While this element suits most applications, it doesn't convey the correct role information for Buttons of type `checkbox` and `radio`. For this reason the Button ARIA Plugin sets the ARIA `role` attribute of each Button to either `checkbox` and `radio`, and the ARIA `role` attribute for the root element of a ButtonGroup to `radiogroup`. Lastly, for Buttons of type `checkbox` and `radio`, the Button ARIA Plugin automatically toggles the `aria-checked` attribute as the Button's `checked` attribute changes.

### The `labelledby` and `describedby` Attributes.

The Button ARIA Plugin adds a `labelledby` and `describedby` attribute to the ButtonGroup class, each of which maps back to their respective ARIA property of `aria-labelledby` and `aria-describedby`.

var oButtonGroup = new YAHOO.widget.ButtonGroup("buttongroup", { labelledby: "buttongroup-label" });

### More Accessible Split Buttons and Menu Buttons

As indicated above, Buttons of type `menu` and `split` require the Container and Menu ARIA Plugins. No additional configuration of a Button's Menu is required. Setting the `usearia` attribute to `true` for a Button will automatically set the corresponding property on its Menu. Additionally, the `aria-haspop` attribute will automatically be set to `true` for each Button's `<button>` element so that users of AT know that the Button has a corresponding Menu. The Menu's `labelledby` configuration property will automatically be set to the id of the Button, to further associate the Menu with its corresponding Button for users of AT.

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

### Button Control Examples:

- Push Buttons
- Link Buttons
- Checkbox Buttons
- Radio Buttons
- Submit Buttons
- Reset Buttons
- Menu Buttons
- Split Buttons
- Simple Calendar Menu Button
- Calendar Menu Button with Date on Button Face
- Color Picker Button
- Fixed Width Menu Button
- Glowing Button
- Slider Button
- Using the Button ARIA Plugin
- Using A Menu Button To Replace A <select> Element
- Replacing the content of a Button's Menu
- Combobox, with CSS for Multiple Stacked Instances (included with examples for AutoComplete Control)
- Showing, Hiding, and Reordering Columns. (included with examples for DataTable Control)
- Getting CSS Style Sheets (included with examples for Get Utility)
- Complex Application (included with examples for Layout Manager)

### More Button 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