Toggle switches are the digital equivalent of a physical on / off switch. They're used everywhere, from online exams to mobile apps. One of the most recognized uses of toggle switches is your operation system or browser's preference page(s). For example, this is the accessibility preferences page for my iMac. The capsule-shaped toggles are on the right side of the page, some are active, which is indicated by the color blue with the white knob to the right, and others are inactive, which is indicated by the color grey and the white knob on the left.
Toggle switches are designed for quick and easy decision-making between two mutually exclusive choices - on and off - and always have a default value, usually "off." Once the user makes their choice, it should take effect immediately without the user having to click "Save" or "Submit."
When not designed with accessibility in mind, these seemingly simple controls can create significant hurdles for users with disabilities. This blog post will discuss the visual attributes of accessible toggle switches.
By the way, don't confuse a toggle switch with a toggle button. The difference is that toggle switches only allow two choices (on / off), while toggle buttons allow a third option.
Visual Attributes of an Accessible Toggle Switch
While the capsule-shaped toggle with a knob (white circle located on the right of the toggle) isn’t a native HTML element, it is a widely recognized design pattern. Most users may instinctively understand how to interact with it, as they've probably encountered similar controls in countless apps and websites.
Although it is widely accepted, the capsule-shaped toggle is not mandatory. The image below shows other shapes that can be used for toggle switches: the capsule, rectangle, and single-line shape.
Image by Alex Muench
However, it is a best practice to ensure that toggle switches are implemented consistently. Do not mix in other input elements like radio buttons or checkboxes.
You will also need to consider the size of the toggle switch. Following the requirements laid out in SC 2.5.8: Target Size (Minimum) (Level AA), you can be sure to create a toggle switch that will be usable by people with disabilities, such as hand tremors, decreased dexterity, fine motor control, and low vision. The target size can determine the success or failure of the interaction.
Now, it's time to design your layout. The standard layout for a toggle switch includes the switch, its label, and optionally a description, arranged horizontally. However, a vertical arrangement may be preferable if the horizontal placement would create excessive space between the switch and its label.
| Horizontal Layout | Vertical Layout |
 |
 |
Using clear, contrasting colors helps users with low vision and / or color blindness determine the state of the toggle switch to make the requested choice. Make sure to adhere to the 4.5:1 ratio required by WCAG SC 1.4.3: Contrast (Minimum) (Level AA) for both the active color against the background and knob color and for the inactive color against the background knob color.
As always, avoid relying solely on color to indicate the state. Provide clear, concise labels along with contrasting colors.
Proper contrast applies to the color choices of your focus indicators as well. Make sure there is proper contrast between the background and the active or inactive colors and the knob color.
In the image below, note the contrast between the background, active and inactive colors, and the knob and focus indicator is clear, visible, and meets the minimum contrast of 4:5.1. Also, color is not the only indicator of the current status of the toggle switch.
Image courtesy of MagentaA11y
By carefully considering color contrast, iconography, and overall design, you can ensure that your toggle switches are usable by people with a wide range of abilities.
For more technical information on making toggle switches screen reader accessible, please read "How to Test a Toggle Switch" and "Switch Pattern" (W3C).
Resources
- Toggle Switch Primer
- How to Test a Toggle Switch
- Toggle-Switch Guidelines
- The Accessibility of Styled Form Controls
- Why toggle switches suck (and what to do instead)
- On Designing and Building Toggle Switches
- Toggle Switch: 5 Simple Design Tips For Better Design
- An accessible toggle: HTML + CSS only implementation
