HTML: the `aria-pressed` attribute

The aria-pressed attribute communicates whether a toggle button is currently on or off.

What you will learn

How to describe a toggle button with aria-pressed
When to use true, false, or mixed
Why the attribute, visible appearance, and behavior must stay synchronized

Basic example

<button type="button" aria-pressed="false">
  Add to favorites
</button>

The button starts in the off state. When the user toggles it, JavaScript should update aria-pressed to true and update the visible style or label so the state is clear.

Allowed states

true: the toggle is on.
false: the toggle is off.
mixed: a group or composite toggle contains both on and off items.

<button type="button" aria-pressed="true">
  Favorites added
</button>

Use a real button

Apply aria-pressed to a button that toggles a state. Do not replace the button with a clickable div; a native button already supplies keyboard behavior and the correct role.

Common mistakes

Using aria-pressed on a button that performs an action once instead of toggling a state.
Leaving the attribute at false after the control has been turned on.
Using a changing button label as a substitute for correctly updating the state.