This technique demonstrates how to use the button role.
This role should be used for clickable elements that trigger a response when activated by the user. On its own,
role="button" can make any element (e.g. <p>, <span> or <div>) appears as a button control to a screen reader. Additionally, this role can be used in combination with the
aria-pressed attribute in order to create toggle buttons.
<input type="button" />and
<input type="image" />) rather than the
buttonrole, as native HTML buttons are more widely supported by older user agents and assistive technology. Native HTML buttons also support keyboard and focus requirements by default, without need for additional customization.
Keyboard and focus
Buttons are interactive controls, and therefore must be focusable. If the
button role is added to an element that is not focusable by itself (such as
tabindex attribute will have to be used to make the button focusable.
Buttons need to be operable by mouse users as well as keyboard users. For native HTML buttons, the button's
onclick event will fire both for mouse clicks and when the space key is pressed while the button has focus. If
role="button" is used to create a custom button, the
onclick event will only fire when clicked by the mouse cursor. Because of this, the developer will have to explicitly add a separate key event handler to the element so that the button can be triggered when the space key is pressed.
role="button"alone is not sufficient. It will also be necessary to add a key event handler that listens for the Space key in order to be consistent with native buttons.
An advantage of using role="button" is that it allows the creation of toggle buttons. A toggle button can have two states: pressed and not pressed. Whether or not a button is a toggle button can be indicated with the
aria-pressed attribute in addition to the
aria-pressedis not used the button is not a toggle buttton.
aria-pressed="false"is used the button is a toggle button that is currently not pressed.
is used the button is a toggle button that is currently pressed.
aria-pressed="mixed"is used, the button is considered to be partially pressed.
Buttons always need to have an accessible name. For most buttons, this name will be the same as the text inside the button. In some cases, for example for icon buttons, the accessible name can be provided through an
Possible effects on user agents and assistive technology
button role is used, user agents should expose the element as a button control in the operating system's accessibility API. Screen readers should announce the element as a button and describe its accessible name. Speech recognition software should allow the button to be activated by saying "click" followed by the button's accessible name.=
Example 1: A basic button
In the snippet below a span element is given the
button role. Because a
<span> element is used, the
tabindex attribute is required to make the button focusable and part of the tab order. Note that this snippet implies that CSS styles are provided to make the
<span> element look like a button and that
handleBtnKeyUp are event handlers that perform the button's action when clicked and when the Space key is pressed.
<span role="button" tabindex="0" onclick="handleBtnClick()" onKeyUp="handleBtnKeyUp()">Save</span>
Exampe 2: A toggle button
In this snippet a native HTML button is converted to a toggle button using the aria-pressed attribute. Note that the tabindex attribute does not have to be used here because the
<button> element is already focusable by default. When the button is activated, the
aria-pressed value switches between
ARIA attributes used
Related ARIA techniques
TBD: Add support information for common UA and AT product combinations