aria-pressed

When to use

On a button that acts as a toggle — mute / unmute, follow / unfollow, bold / not-bold in a text editor, sidebar-open / sidebar-closed. The button changes state but does not perform navigation; the label stays the same and only the pressed state communicates the change.

Three values are valid:

• aria-pressed="false" — the toggle is off.
• aria-pressed="true" — the toggle is on.
• aria-pressed="mixed" — used when the toggle controls multiple sub-items and they are in a mixed state (some on, some off). Rare in practice; most authors split into separate controls instead.

If your button does not toggle — it just submits a form or opens a modal — do not use aria-pressed. Use aria-expanded for disclosure controls, or no state attribute at all for plain action buttons.

How to keep it in sync

aria-pressed is a state, which means it changes as the user interacts. Whatever click handler updates the visual appearance of the button must also update the attribute. The two should never disagree — if the icon shows muted, aria-pressed should say "true".

<button
  type="button"
  aria-pressed="false"
  onclick="
    const next = this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true';
    this.setAttribute('aria-pressed', next);
    toggleMute(next === 'true');
  "
>
  Mute
</button>

Common failures

• Setting aria-pressed on a non-button (a <div> or <a>). Use role="button" or, better, switch to <button>.
• Toggling the visual state with CSS but never updating aria-pressed. Screen-reader users keep hearing the same state.
• Using aria-pressed="true" on a button that doesn’t toggle (a “Submit” button) — confuses the assistive technology into announcing an irrelevant state.
• Confusing aria-pressed with aria-selected (for items in a single-select widget like a tab or option) or aria-checked (for checkboxes and radio buttons). Each has different semantics; pick the one that matches the widget pattern.