ARIA button role Example

Creating Buttons using role=button

Authoring Practice Design Patten for Button

Note: When using HTML, use the <button> element. It is recommended that authors not re-purpose other elements to create buttons.

Button Examples

The following examples are composed by a native <button> element, a <div> functioning as a native button, and a <span> element that functions as a toggle button.

Type Technique Button Accessibility Feature
Push button div element with text
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 div element with text Mute
  • div element with role="button".
  • div element has onclick event to handle mouse clicks.
  • div element has onkeydown event to handle keyboard support.
  • Aria property/status from aria-pressed attribute.
Push button tabindex="0" element 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.
Non compliant a element with href="#" Show alert
  • It is a bad practice because it does not support space bar for button activiation.

Keyboard Support

Key Function
Space or enter Activate or toggle button

ARIA Roles, Properties and States

Role Property/State Component Usage
button span or div
  • Identify element with the button behavior
aria-pressed span
  • Identify element with the toggle button behavior

Source Code

HTML Code

HTML source code is generated by scripting using ID references.

First Example: Push button

Second Example: Toggle button


<span tabindex="0"
     role="button"
     aria-pressed="false">
  Mute
</span>

Third Example: Push button


<a tabindex="0"
     role="button"
    >
  Show alert
</a>

Non-compliant Example


<a href="#"
     role="button"
    >
  Show alert
</a>