YUI Library Home

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.

Pizza Toppings
Radio Buttons
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.

1<!-- Source file --> 
2<script type="text/javascript" src="../button/assets/buttonariaplugin.js"></script> 
3 
4<!-- OPTIONAL: Menu and Container ARIA Plugin files (required for creating Buttons of type "menu" and "split") --> 
5<script type="text/javascript" src="../container/assets/containerariaplugin.js"></script> 
6<script type="text/javascript" src="../menu/assets/menuariaplugin.js"></script> 
view plain | print | ?

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:

1var oButton = new YAHOO.widget.Button({  
2    type: "checkbox"
3    usearia: true
4    label: "A Checkbox",  
5    name: "checkbox-1",  
6    value: "1",  
7    container: document.body }); 
view plain | print | ?

The same is true of the ButtonGroup widget:

1var oButtonGroup = new YAHOO.widget.ButtonGroup({   
2                        name:  "radiogroup-1",  
3                        container:  document.body,  
4                        usearia: true }); 
5 
6oButtonGroup.addButtons([ 
7    { label: "Radio 1", value: "1" checked: true }, 
8    { label: "Radio 2", value: "2" },  
9    { label: "Radio 3", value: "3" },  
10    { label: "Radio 4", value: "4" } 
11]); 
view plain | print | ?

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.

1var oButtonGroup = new YAHOO.widget.ButtonGroup("buttongroup", { labelledby: "buttongroup-label" }); 
view plain | print | ?

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:

Logger Console

INFO 1008ms (+1) 11:05:23 PM:

Button splitbutton-1

Initialization completed.

INFO 1007ms (+0) 11:05:23 PM:

Button null

Source element could not be used as is. Creating a new HTML element for the button.

INFO 1007ms (+0) 11:05:23 PM:

Button null

Setting attribute "value" using source element's attribute value of "Reply"

INFO 1007ms (+0) 11:05:23 PM:

Button null

Setting attribute "name" using source element's attribute value of "splitbutton-1"

INFO 1007ms (+0) 11:05:23 PM:

Button null

Building the button using an existing HTML element as a source element.

INFO 1007ms (+14) 11:05:23 PM:

Button menubutton-1

Initialization completed.

INFO 993ms (+0) 11:05:23 PM:

Button null

Source element could not be used as is. Creating a new HTML element for the button.

INFO 993ms (+0) 11:05:23 PM:

Button null

Setting attribute "value" using source element's attribute value of "Move To"

INFO 993ms (+0) 11:05:23 PM:

Button null

Setting attribute "name" using source element's attribute value of "menubutton-1"

INFO 993ms (+0) 11:05:23 PM:

Button null

Building the button using an existing HTML element as a source element.

INFO 993ms (+0) 11:05:23 PM:

ButtonGroup buttongroup

Initialization completed.

INFO 993ms (+0) 11:05:23 PM:

ButtonGroup buttongroup

Button radio3 added.

INFO 993ms (+0) 11:05:23 PM:

Button radio3

Initialization completed.

INFO 993ms (+0) 11:05:23 PM:

Button null

Source element could not be used as is. Creating a new HTML element for the button.

INFO 993ms (+0) 11:05:23 PM:

Button null

Setting attribute "value" using source element's attribute value of "Large"

INFO 993ms (+0) 11:05:23 PM:

Button null

Setting attribute "name" using source element's attribute value of "radiofield1"

INFO 993ms (+0) 11:05:23 PM:

Button null

Building the button using an existing HTML element as a source element.

INFO 993ms (+0) 11:05:23 PM:

ButtonGroup buttongroup

Button radio2 added.

INFO 993ms (+1) 11:05:23 PM:

Button radio2

Initialization completed.

INFO 992ms (+0) 11:05:23 PM:

Button null

Source element could not be used as is. Creating a new HTML element for the button.

INFO 992ms (+0) 11:05:23 PM:

Button null

Setting attribute "value" using source element's attribute value of "Medium"

INFO 992ms (+0) 11:05:23 PM:

Button null

Setting attribute "name" using source element's attribute value of "radiofield1"

INFO 992ms (+0) 11:05:23 PM:

Button null

Building the button using an existing HTML element as a source element.

INFO 992ms (+0) 11:05:23 PM:

ButtonGroup buttongroup

Button radio1 added.

INFO 992ms (+1) 11:05:23 PM:

Button radio1

Initialization completed.

INFO 991ms (+0) 11:05:23 PM:

Button null

Source element could not be used as is. Creating a new HTML element for the button.

INFO 991ms (+0) 11:05:23 PM:

Button null

Setting attribute "value" using source element's attribute value of "Small"

INFO 991ms (+0) 11:05:23 PM:

Button null

Setting attribute "name" using source element's attribute value of "radiofield1"

INFO 991ms (+0) 11:05:23 PM:

Button null

Building the button using an existing HTML element as a source element.

INFO 991ms (+0) 11:05:23 PM:

ButtonGroup buttongroup

Found 3 child nodes with the type of "radio." Attempting to add to button group.

INFO 991ms (+0) 11:05:23 PM:

ButtonGroup buttongroup

Searching for child nodes with the type of "radio" to add to the button group.

INFO 991ms (+1) 11:05:23 PM:

ButtonGroup buttongroup

Searching for child nodes with the class name "yui-radio-button" to add to the button group.

INFO 990ms (+0) 11:05:23 PM:

Button checkbutton4

Initialization completed.

INFO 990ms (+0) 11:05:23 PM:

Button null

Source element could not be used as is. Creating a new HTML element for the button.

INFO 990ms (+0) 11:05:23 PM:

Button null

Setting attribute "value" using source element's attribute value of "4"

INFO 990ms (+0) 11:05:23 PM:

Button null

Setting attribute "name" using source element's attribute value of "checkboxfield1"

INFO 990ms (+0) 11:05:23 PM:

Button null

Setting attribute "type" using source element's attribute value of "checkbox"

INFO 990ms (+0) 11:05:23 PM:

Button null

Building the button using an existing HTML element as a source element.

INFO 990ms (+1) 11:05:23 PM:

Button checkbutton3

Initialization completed.

INFO 989ms (+0) 11:05:23 PM:

Button null

Source element could not be used as is. Creating a new HTML element for the button.

INFO 989ms (+0) 11:05:23 PM:

Button null

Setting attribute "value" using source element's attribute value of "3"

INFO 989ms (+0) 11:05:23 PM:

Button null

Setting attribute "name" using source element's attribute value of "checkboxfield1"

INFO 989ms (+0) 11:05:23 PM:

Button null

Setting attribute "type" using source element's attribute value of "checkbox"

INFO 989ms (+0) 11:05:23 PM:

Button null

Building the button using an existing HTML element as a source element.

INFO 989ms (+1) 11:05:23 PM:

Button checkbutton2

Initialization completed.

INFO 988ms (+0) 11:05:23 PM:

Button null

Source element could not be used as is. Creating a new HTML element for the button.

INFO 988ms (+0) 11:05:23 PM:

Button null

Setting attribute "value" using source element's attribute value of "2"

INFO 988ms (+1) 11:05:23 PM:

Button null

Setting attribute "name" using source element's attribute value of "checkboxfield1"

INFO 987ms (+0) 11:05:23 PM:

Button null

Setting attribute "type" using source element's attribute value of "checkbox"

INFO 987ms (+0) 11:05:23 PM:

Button null

Building the button using an existing HTML element as a source element.

INFO 987ms (+3) 11:05:23 PM:

Button checkbutton1

Initialization completed.

INFO 984ms (+0) 11:05:23 PM:

Button null

Source element could not be used as is. Creating a new HTML element for the button.

INFO 984ms (+0) 11:05:23 PM:

Button null

Setting attribute "value" using source element's attribute value of "1"

INFO 984ms (+0) 11:05:23 PM:

Button null

Setting attribute "name" using source element's attribute value of "checkboxfield1"

INFO 984ms (+0) 11:05:23 PM:

Button null

Setting attribute "type" using source element's attribute value of "checkbox"

INFO 984ms (+984) 11:05:23 PM:

Button null

Building the button using an existing HTML element as a source element.

INFO 0ms (+0) 11:05:22 PM:

global

Logger initialized

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

More Button Control Resources:

Copyright © 2009 Yahoo! Inc. All rights reserved.

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