How to Make Toggle Switches Accessible to Screen Readers and Other Assistive Technologies

Toggle is a piece of material (often plastic) that’s passed through a hole or eyelet to fasten something. The word is also used for a kind of switch on a computer or other machine, to allow users to choose between two functions. For example, someone might toggle between streaming and map views on an exhibit.

Web designers often use toggle switches as glorified checkboxes. But they’re not always made accessible, causing some users to miss important information. In this article, we’ll show you a simple HTML + CSS solution that’s easy to implement in your own projects and makes toggles accessible to screen readers and other assistive technologies.

In addition to the on/off text, a toggle should convey its current state by using visual cues. Ideally, toggles should update their appearance—usually by changing the background color—to indicate the active state. This is especially important when a toggle controls a content element that’s difficult to recognize, such as a radio button or checkbox.

Our research found that the most effective toggles clearly identify the setting, view, or content the toggle affects and provide a clear indication of which side is active. They also use a pronounced and saturated color for the active state and a lighter color for the inactive state. The best toggles are also readable in a small size, and they have an unmistakable shape.

In contrast, the worst performing toggles were ones that only had a text label to communicate the current state and no other visual cues. This is a big mistake because users depend on other cues, like the position of a control and its colors, to understand what’s currently being controlled.