Controls
Accessible toggle buttons: Examples and Testing
Published by whatisADA / Grow Wild Agency · Updated
What to build
A toggle button represents an on/off state for an action or mode. Keep a stable label and expose its pressed state so a user can distinguish the action from whether it is currently active.
A practical example
An editor has a Bold button. The label stays “Bold” while aria-pressed changes with the selected formatting, and the appearance supplies a second visible state cue.
Try the example
Use Tab and your keyboard controls, then compare the behavior with the checks below. This is an isolated learning example; test the complete pattern in your own product and assistive technology setup.
How to check it
- Activate the toggle with Enter, Space and pointer input.
- Inspect aria-pressed and the visible state before and after activation.
- Verify that the label stays understandable and that unrelated state updates do not reset the toggle.
What can be missed
Changing both the label and the pressed semantics can make the meaning confusing. A command whose wording changes from Play to Pause is often better expressed as an ordinary action button.
Markup and state contract
This concise markup illustrates names, relationships or state. Custom controls also need the keyboard interaction and state updates described in the checks and primary source; this snippet is not a complete component.
<button type="button" aria-pressed="false">Bold</button>Record your test
Use this worksheet to record what you actually checked. Notes stay on this device when you choose Save; they are not sent to us. Avoid personal or confidential information on shared devices.
These are your observations, not automated results or a conformance certificate. A complete evaluation needs appropriate scope, supported technologies, all applicable criteria and relevant page states.
Primary sources and scope
This is independent implementation guidance with original examples. The linked standard contains the full definitions, exceptions and conformance requirements. A criterion or checklist alone does not establish legal applicability or whole-site conformance.