Button Examples

The following command and toggle button examples demonstrate the button design 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.

Example

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.js

HTML Source Code

<p>
  This
  <q>
    Print
  </q>
  action button uses a
  <code>
    div
  </code>
  element.
</p>
<div tabindex="0"
     role="button"
     id="action">
  Print Page
</div>
<p>
  This
  <q>
    Mute
  </q>
  toggle button uses an
  <code>
    a
  </code>
  element.
</p>
<a tabindex="0"
   role="button"
   id="toggle"
   aria-pressed="false">
  Mute
  <svg aria-hidden="true" focusable="false">
    <use xlink:href="#icon-sound"></use>
  </svg>
</a>