Toggle — or toggle switch if you prefer — is one of the most heavily used and widely recognizable icons in modern interface design. You see them in every screen type from chat windows to tabs and even videogame controls. But despite their ubiquitous presence they are often made inaccessible, either through lack of semantic markup or through poor visual design. This article explores some best practices for creating an accessible toggle that works as intended and aims to make this essential design element more recognizable, usable and intuitive.
When a toggle is correctly configured it should clearly communicate what setting, view or content the button affects. Ideally this is communicated through an icon that makes it visually clear what the toggles current state is. However, if this is not possible or the icon does not convey enough information there are other ways to signal what the toggle currently is, such as color or font size.
In a recent experiment we tested toggles with varying text size differences to see what impact it would have on perception. The toggle with the smallest difference performed best with an error rate of 3.5% and a confidence score of 0.63, while the one with the largest difference was perceived as inactive with a much higher error rate (8.8%) and lower confidence score (0.41).
Generally speaking it’s good practice to test the feature toggle configuration that will be live in production, but it’s also important to test any fallback or back-out toggle configurations flipped Off. This allows teams to avoid surprise regressions in future releases and provides a way to validate that they’re deploying the right behavior to the correct users. This kind of toggle configuration management can range from very simple approaches like commenting out specific lines of code through to more sophisticated ways of dynamically re-configuring specific service instances, such as by using a preprocessor’s #ifdef.
