Short answer: A toggle button switches something on and off and tells screen readers which state it is in. Keep its label fixed and add aria-pressed, or let the label change and leave aria-pressed out. For a setting that is on or off, use role="switch" with aria-checked, or a checkbox.
Ways to say on or off
| Pattern | What the screen reader announces | When to use it |
|---|---|---|
| A button with aria-pressed | Its fixed name, pressed or not | One label that never changes, such as Mute |
| A button whose name changes | Only the new name | Play and Pause, Show and Hide |
| role="switch" with aria-checked | Its name, on or off | A setting that turns something on or off |
| A checkbox | Its name, checked or not | A choice, often styled as a switch |
| aria-pressed="mixed" | Partly pressed | A button over items in different states |
From MDN and the W3C’s authoring practices for ARIA, read November 5, 2026.
The W3C notes that these patterns are often interchangeable: pick the one whose meaning fits the control. A light might read better as on or off than as checked or unchecked.
aria-pressed keeps the label still
MDN explains that aria-pressed on a button turns it into a toggle button. It can be true, false or mixed, and each full press and release flips it.
The W3C’s example is a Mute button in an audio player, pressed while the sound is off. The rule that comes with it: the label must not change when the state does. MDN puts it plainly: if you want the label to switch between Play and Pause, don’t use aria-pressed.
Switches: on or off
MDN describes the switch role as a checkbox that says on and off instead of checked and unchecked. aria-checked is required: true means on, false means off.
The W3C pattern adds that a switch’s label stays put too when its state changes. Space changes it, Enter is optional, and the switch only ever has two values.
Start with HTML
MDN recalls the first rule of ARIA: if HTML already has an element with the meaning and behavior you want, take it before adding a role. A checkbox styled as a switch is often the simplest answer.
A real button element also brings Enter and Space for free, as our button or link guide explains. When ARIA is worth it is the subject of our guide to what ARIA is.
How to build a toggle
- Decide whether the label changes with the state or stays the same.
- For a fixed label, use a button with aria-pressed true or false.
- For a changing label, use a plain button and no aria-pressed.
- For a setting, use a checkbox or role="switch" with aria-checked.
- Update the state in the same script that changes what the screen shows.
- Make sure Space works, and Enter on buttons.
- Compare the name and state in the accessibility tree with what the screen shows.
Our own toggles
On November 5, 2026, we read the three two-state controls on our guides in Chrome’s accessibility tree, in both languages. Each one uses a different pattern from this guide.
The theme button in the header changes its name: “Switch to dark mode” becomes “Switch to light mode” once clicked. It has no pressed state, which is right for a label that changes. The cookie preference switches use role switch with aria-checked: “Analytics” keeps its name while its state goes from on to off and back.
The play button of our audio player did both until that morning. aria-pressed went from false to true while its name changed from “Play the audio version” to “Pause”. We removed aria-pressed, so the name alone now says what the button does.
Before you publish
- No control both changes its label and carries aria-pressed.
- Toggle buttons with aria-pressed keep one label.
- Switches have role="switch" and an up-to-date aria-checked.
- The state on screen and in the code always match.
- Space works on every toggle, and Enter on buttons.
- A native element was considered first.
RememberSay the state once. Either the label changes or a pressed or checked state does the talking, never both at the same time.
Our web design service checks controls like these against the accessibility tree before launch.
Quick answers about toggle buttons
What is the difference between a toggle button and a switch?
Both offer two states. The W3C notes that a switch can only be on or off, while a toggle button may also support a middle, mixed state. Choose the one whose meaning fits: pressed for a button like Mute, on and off for a setting.
Can a toggle button change its label?
Not if it uses aria-pressed. MDN says not to change the label when the state changes: a Pause button stays Pause, pressed or not. If you want the label to switch between Play and Pause, leave aria-pressed out.
What does aria-pressed="mixed" mean?
That the items the button controls don’t all share the same value. MDN gives it as the third value of aria-pressed, next to true and false. A switch can’t use it: MDN says the switch role doesn’t support mixed.
Should I use a checkbox instead?
Often, yes. MDN quotes the first rule of ARIA: use a native HTML feature that already has the behavior you need. The W3C even shows switches built on a checkbox input, styled to look like a switch.
Which keys should work on a toggle?
Space and Enter activate a button, including a toggle button, under the W3C button pattern. For a switch, the W3C asks for Space and leaves Enter optional.
Sources
Read on November 5, 2026. W3C Web Accessibility Initiative: Switch Pattern and Button Pattern. MDN Web Docs: ARIA: aria-pressed attribute and ARIA: switch role. Our case: our own pages, read in a browser on November 5, 2026.