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.
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:
| 1 | var 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:
| 1 | var oButtonGroup = new YAHOO.widget.ButtonGroup({ |
| 2 | name: "radiogroup-1", |
| 3 | container: document.body, |
| 4 | usearia: true }); |
| 5 | |
| 6 | oButtonGroup.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.
| 1 | var 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 327ms (+0) 6:36:47 PM:
Button loggerLink
Initialization completed.
INFO 327ms (+1) 6:36:47 PM:
Button null
Setting attribute "href" using source element's attribute value of "button-ariaplugin.html"
INFO 326ms (+5) 6:36:47 PM:
Button null
Building the button using an existing HTML element as a source element.
INFO 321ms (+1) 6:36:47 PM:
Button splitbutton-1
Initialization completed.
INFO 320ms (+0) 6:36:47 PM:
Button null
Source element could not be used as is. Creating a new HTML element for the button.
INFO 320ms (+0) 6:36:47 PM:
Button null
Setting attribute "value" using source element's attribute value of "Reply"
INFO 320ms (+0) 6:36:47 PM:
Button null
Setting attribute "name" using source element's attribute value of "splitbutton-1"
INFO 320ms (+0) 6:36:47 PM:
Button null
Building the button using an existing HTML element as a source element.
INFO 320ms (+11) 6:36:47 PM:
Button menubutton-1
Initialization completed.
INFO 309ms (+0) 6:36:47 PM:
Button null
Source element could not be used as is. Creating a new HTML element for the button.
INFO 309ms (+0) 6:36:47 PM:
Button null
Setting attribute "value" using source element's attribute value of "Move To"
INFO 309ms (+0) 6:36:47 PM:
Button null
Setting attribute "name" using source element's attribute value of "menubutton-1"
INFO 309ms (+0) 6:36:47 PM:
Button null
Building the button using an existing HTML element as a source element.
INFO 309ms (+0) 6:36:47 PM:
ButtonGroup buttongroup
Initialization completed.
INFO 309ms (+0) 6:36:47 PM:
ButtonGroup buttongroup
Button radio3 added.
INFO 309ms (+1) 6:36:47 PM:
Button radio3
Initialization completed.
INFO 308ms (+0) 6:36:47 PM:
Button null
Source element could not be used as is. Creating a new HTML element for the button.
INFO 308ms (+0) 6:36:47 PM:
Button null
Setting attribute "value" using source element's attribute value of "Large"
INFO 308ms (+0) 6:36:47 PM:
Button null
Setting attribute "name" using source element's attribute value of "radiofield1"
INFO 308ms (+0) 6:36:47 PM:
Button null
Building the button using an existing HTML element as a source element.
INFO 308ms (+0) 6:36:47 PM:
ButtonGroup buttongroup
Button radio2 added.
INFO 308ms (+1) 6:36:47 PM:
Button radio2
Initialization completed.
INFO 307ms (+0) 6:36:47 PM:
Button null
Source element could not be used as is. Creating a new HTML element for the button.
INFO 307ms (+0) 6:36:47 PM:
Button null
Setting attribute "value" using source element's attribute value of "Medium"
INFO 307ms (+0) 6:36:47 PM:
Button null
Setting attribute "name" using source element's attribute value of "radiofield1"
INFO 307ms (+0) 6:36:47 PM:
Button null
Building the button using an existing HTML element as a source element.
INFO 307ms (+0) 6:36:47 PM:
ButtonGroup buttongroup
Button radio1 added.
INFO 307ms (+0) 6:36:47 PM:
Button radio1
Initialization completed.
INFO 307ms (+0) 6:36:47 PM:
Button null
Source element could not be used as is. Creating a new HTML element for the button.
INFO 307ms (+0) 6:36:47 PM:
Button null
Setting attribute "value" using source element's attribute value of "Small"
INFO 307ms (+0) 6:36:47 PM:
Button null
Setting attribute "name" using source element's attribute value of "radiofield1"
INFO 307ms (+1) 6:36:47 PM:
Button null
Building the button using an existing HTML element as a source element.
INFO 306ms (+0) 6:36:47 PM:
ButtonGroup buttongroup
Found 3 child nodes with the type of "radio." Attempting to add to button group.
INFO 306ms (+0) 6:36:47 PM:
ButtonGroup buttongroup
Searching for child nodes with the type of "radio" to add to the button group.
INFO 306ms (+0) 6:36:47 PM:
ButtonGroup buttongroup
Searching for child nodes with the class name yui-radio-button to add to the button group.
INFO 306ms (+1) 6:36:47 PM:
Button checkbutton4
Initialization completed.
INFO 305ms (+0) 6:36:47 PM:
Button null
Source element could not be used as is. Creating a new HTML element for the button.
INFO 305ms (+0) 6:36:47 PM:
Button null
Setting attribute "value" using source element's attribute value of "4"
INFO 305ms (+0) 6:36:47 PM:
Button null
Setting attribute "name" using source element's attribute value of "checkboxfield1"
INFO 305ms (+0) 6:36:47 PM:
Button null
Setting attribute "type" using source element's attribute value of "checkbox"
INFO 305ms (+0) 6:36:47 PM:
Button null
Building the button using an existing HTML element as a source element.
INFO 305ms (+0) 6:36:47 PM:
Button checkbutton3
Initialization completed.
INFO 305ms (+0) 6:36:47 PM:
Button null
Source element could not be used as is. Creating a new HTML element for the button.
INFO 305ms (+0) 6:36:47 PM:
Button null
Setting attribute "value" using source element's attribute value of "3"
INFO 305ms (+1) 6:36:47 PM:
Button null
Setting attribute "name" using source element's attribute value of "checkboxfield1"
INFO 304ms (+0) 6:36:47 PM:
Button null
Setting attribute "type" using source element's attribute value of "checkbox"
INFO 304ms (+0) 6:36:47 PM:
Button null
Building the button using an existing HTML element as a source element.
INFO 304ms (+0) 6:36:47 PM:
Button checkbutton2
Initialization completed.
INFO 304ms (+0) 6:36:47 PM:
Button null
Source element could not be used as is. Creating a new HTML element for the button.
INFO 304ms (+1) 6:36:47 PM:
Button null
Setting attribute "value" using source element's attribute value of "2"
INFO 303ms (+0) 6:36:47 PM:
Button null
Setting attribute "name" using source element's attribute value of "checkboxfield1"
INFO 303ms (+0) 6:36:47 PM:
Button null
Setting attribute "type" using source element's attribute value of "checkbox"
INFO 303ms (+0) 6:36:47 PM:
Button null
Building the button using an existing HTML element as a source element.
INFO 303ms (+2) 6:36:47 PM:
Button checkbutton1
Initialization completed.
INFO 301ms (+0) 6:36:47 PM:
Button null
Source element could not be used as is. Creating a new HTML element for the button.
INFO 301ms (+0) 6:36:47 PM:
Button null
Setting attribute "value" using source element's attribute value of "1"
INFO 301ms (+0) 6:36:47 PM:
Button null
Setting attribute "name" using source element's attribute value of "checkboxfield1"
INFO 301ms (+1) 6:36:47 PM:
Button null
Setting attribute "type" using source element's attribute value of "checkbox"
INFO 300ms (+23) 6:36:47 PM:
Button null
Building the button using an existing HTML element as a source element.
INFO 277ms (+2) 6:36:47 PM:
LogReader instance0
LogReader initialized
INFO 275ms (+1) 6:36:47 PM:
Get
Appending node: ../../../2.x/build/event-mouseenter/event-mouseenter-min.js
INFO 274ms (+0) 6:36:47 PM:
Get
attempting to load ../../../2.x/build/event-mouseenter/event-mouseenter-min.js
INFO 274ms (+274) 6:36:47 PM:
Get
_next: q0, loaded: undefined
INFO 0ms (+0) 6:36:47 PM:
global
Logger initialized
Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.
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)
- Yahoo! UI Library
- Home (external)
- YUIBlog (external)
- YUI Discussion Forum (external)
- YUI on GitHub
- API Documentation
- Functional Examples
- YUI Theater (external)
- YUI License (external)
- YUI Functional Examples
- Animation
- AutoComplete
- Browser History Manager
- Button
- Calendar
- Carousel
- Charts
- Color Picker
- Cookie
- Connection Manager
- Container
- DataTable
- Dom
- Drag & Drop
- Event
- Get
- ImageCropper
- ImageLoader
- JSON
- Layout Manager
- Logger
- Menu
- Paginator
- Profiler
- ProfilerViewer
- ProgressBar
- Resize
- Rich Text Editor
- Selector
- Slider
- Storage
- SWF
- SWFStore
- Stylesheet
- TabView
- TreeView
- Uploader (experimental)
- YAHOO Global Object
- YUI Loader
- YUI Test
- Reset CSS
- Base CSS
- Fonts CSS
- Grids CSS
- YUI Articles on the YUI Website
- YUI FAQ (external)
- Graded Browser Support (external)
- Bug Reports/Feature Requests (external)
- Serving YUI Files from Yahoo! (external)
- Security Best Practices (external)
Copyright © 2011 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings