Skip to content

Button Examples

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.

About This Example

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

Similar examples include:

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.

Assistive Technology Support

Learn how to interpret and use assistive technology support data

Command Button

Toggle Button

JavaScript and CSS Source Code

HTML Source Code

To copy the following HTML code, please open it in CodePen.

Back to Top