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

HTML Source Code

First Example: Push button

Second Example: Toggle button

Third Example: Push button