ARIA: aria-pressed attribute

Thearia-pressed attribute indicates the current "pressed" state of a toggle button.

Description

Addingaria-pressed to an element with a role ofbutton turns the button into a toggle button. Thearia-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 totrue,false,mixed, orundefined values. In the case ofaria-pressed, like most tri-state value types, the default value isundefined.

Toggle buttons require a full press-and-release cycle to change their value. Pressing and releasing it once changes the value totrue. If it's pressed and released again, the value changes back tofalse.

A value ofmixed 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".

html

<button aria-pressed="false">Pause</button>

If you want the label to toggle between "Paused" and "Play", don't usearia-pressed.

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 thearia-pressed attribute.

Values

false: The button supports being pressed but is not currently pressed.
mixed: Indicates a mixed mode value for a tri-state toggle button.
true: The button is pressed.
undefined (default): The element does not support being pressed.

Associated interfaces

Element.ariaPressed: TheariaPressed property, part of theElement interface, reflects the value of thearia-pressed attribute.
ElementInternals.ariaPressed: TheariaPressed property, part of theElementInternals interface, reflects the value of thearia-pressed attribute.