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">
      <use xlink:href="images/mute.svg#icon-sound">
    </svg>
  </a>