Controls
Accessible switches: Examples and Testing
Published by whatisADA / Grow Wild Agency · Updated
What to build
A switch represents a setting that is on or off. Keep its label stable, expose the current state and make activation work through the expected keyboard behavior, without depending on the thumb's position or color alone.
A practical example
A reading view has a “Reduced motion” switch. Turning it on suppresses nonessential transitions immediately while leaving the same label in place and displaying the current state in text.
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.
Reminders are off in this example.
How to check it
- Focus the switch and operate it using the expected key, including Space.
- Check that the accessible state and visible on/off indication update together.
- Reload or revisit the setting if persistence is promised and verify that the preference still applies.
What can be missed
A decorative slider shape does not create switch semantics. A native checkbox with appropriate styling may be simpler; if role="switch" is used, test its supported state mapping.
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.
<label><input type="checkbox" role="switch" name="reduced-motion"> Reduced motion</label>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.