Button Examples

Read This First

The code in this example is not intended for production environments. Before using it for any purpose, read this to understand why.

This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.

There may be support gaps in some browser and assistive technology combinations, especially for mobile/touch devices. Testing code based on this example with assistive technologies is essential before considering use in production systems.
The ARIA and Assistive Technologies Project is developing measurements of assistive technology support for APG examples.
Robust accessibility can be further optimized by choosing implementation patterns that maximize use of semantic HTML and heeding the warning that No ARIA is better than Bad ARIA.

The following command and toggle button examples demonstrate the Button Pattern.

Similar examples include:

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.

This Print action button uses a div element.

Print Page

This Mute toggle button uses an a element.

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

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.