Toggle buttons (aria-pressed) — why this matters

Many interfaces use a toggle button for on/off states: mute/unmute, follow/unfollow, equip/unequip, music on/off, and so on.

The catch: if the on/off state is shown only visually (color, a badge, an icon), a screen reader user may only hear “Button” without being told whether it’s currently on or off.

A simple fix: aria-pressed

For a toggle button, expose state by updating aria-pressed:

• aria-pressed="false" when off
• aria-pressed="true" when on

Screen readers can then announce that the button is pressed / not pressed, and users don’t have to guess from visuals.

Notes

• Make sure the visible label stays clear (e.g., “Music”, “Mute”, “Follow”).
• Keep the state change consistent: when the UI changes, update aria-pressed too.
• If it’s a setting-style control (like a switch), you can also consider a switch pattern (role="switch" + aria-checked), but a toggle button with aria-pressed is a common, simple approach.

Related: tooltips demo (don’t be hover-only) · toast demo (announce confirmations)