Button Examples (IDL Version)

NOTE: This is a draft example. Please provide feedback in issue 727.

The following command and toggle button examples demonstrate the button design pattern.

The JavaScript for the examples on this page uses the IDL interface defined in ARIA 1.2. In all other respects, these examples are identical to the Button Examples.

Similar examples include:

Button Examples: Examples of clickable HTML div and span elements made into accessible command and toggle buttons.
Navigation Menu Button: A button that opens a menu of items that behave as links.
Action Menu Button Example Using element.focus(): A button that opens a menu of actions or commands where focus in the menu is managed using element.focus().
Action Menu Button Example Using aria-activedescendant: A button that opens a menu of actions or commands where focus in the menu is managed using aria-activedescendant.

Example

IMPORTANT: This example uses features of the draft ARIA 1.2 specification. As a draft specification, it is subject to change. Any support provided by browsers or assistive technologies is experimental.

This Print action button uses a div element.

Print Page

This Mute toggle button uses an a element.

Mute

Keyboard Support

Key	Function
`Enter`	Activates the button.
`Space`	Activates the button.

Role, Property, State, and Tabindex Attributes

Role	Attribute	Element	Usage
`button`		`div`, `a`	Identifies the element as a `button` widget. Accessible name for the button is defined by the text content of the element.
	`tabindex="0"`	`div`, `a`	Includes the element in the tab sequence. Needed on the `a` element because it does not have a `href` attribute.
	`aria-pressed="false"`	`a`	Identifies the button as a toggle button. Indicates the toggle button is not pressed.
	`aria-pressed="true"`	`a`	Identifies the button as a toggle button. Indicates the toggle button is pressed.

Javascript and CSS Source Code

CSS: button.css
Javascript: button_idl.js

Button Examples (IDL Version)

Example

Keyboard Support

Role, Property, State, and Tabindex Attributes

Javascript and CSS Source Code

HTML Source Code