aria-pressed attribute indicates the current "pressed" state of a toggle button.
aria-pressed to an element with a role of
button turns the button into a toggle button. The
aria-pressed attribute is only relevant for toggle buttons. It represents the button's current "pressed" state.
The value is "tri-state", meaning the value can be set to
undefined values. In the case of
aria-pressed, like most tri-state value types, the default value is
Toggle buttons require a full press-and-release cycle to change their value. Pressing and releasing it once changes the value to
true. If it's pressed and released again, the value changes back to
A value of
mixed means that the values of more than one item controlled by the button do not all share the same value.
Do not change the contents of the label on a toggle when the state changes. If a button label says "pause", do not change it to "play" when pressed. In this example, when the pressed state is true, the label remains "Pause" so a screen reader would say something like "Pause toggle button pressed".
If you want the label to toggle between "Paused" and "Play", don't use
The first rule of ARIA use is "if you can use a native feature with the semantics and behavior you require already built in, instead of repurposing an element and adding an ARIA role, state or property to make it accessible, then do so." If we employ native HTML semantics with
<button>, we can toggle the label instead of toggling the pressed state, removing the need for the
The button supports being pressed but is not currently pressed.
Indicates a mixed mode value for a tri-state toggle button.
The button is pressed.
The element does not support being pressed.
Used in roles:
|Accessible Rich Internet Applications (WAI-ARIA) |