Button Examples

This example page requires updates per issue 189. Please provide any additional feedback in this issue.

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

Examples

Type	Element	Button	Accessibility Feature
Push button	`div`	Print Page	`div` element with `role="button"`. `div` element has `onclick` event to handle mouse clicks. `div` element has `onkeydown` event to handle keyboard support. `div` element has `tabindex="0"` to become part of tab order of the page.
Toggle button	`span`	Mute	`span` element with `role="button"`. `span` element has `onclick` event to handle mouse clicks. `span` element has `onkeydown` event to handle keyboard support. Toggle status using the `aria-pressed` attribute.
Push button	`a`	Show alert	`a` element has `onclick` event to handle mouse clicks. `a` element has `onkeydown` event to handle keyboard support. `a` element has `tabindex="0"` to become part of tab order of the page.

Keyboard Support

Key	Function
`Space or enter`	Activate or toggle button

ARIA Roles, Properties and States

Role	Attribute	Element	Usage
`button`		`div`, `span`, `a`	`role="button"` identifies the element as a `button` widget. Accessible name for the button is defined by the text content of the element.
	`tabindex="0"`	`div`, `span`, `a`	Makes the element keyboard focusable and part of tab order of the page.
	`aria-pressed="false"`	`span`	Identify `span` element with the toggle button behavior as toggled off
	`aria-pressed="true"`	`span`	Identify `span` element with the toggle button behavior as toggled on

Javascript and CSS Source Code

CSS: button.css
Javascript: button.js

HTML Source Code

First Example: Push button

Second Example: Toggle button

Third Example: Push button