Accessible Toggle

A toggle is a switch that enables a user to change the state of a feature (for example whether it’s turned on or off). It’s heavily used in modern interfaces and can be thought of as a glorified checkbox. However, many of these toggle switches are made inaccessible one way or another. To help tackle this issue I’ve put together a small HTML + CSS only implementation of an accessible toggle that can be incorporated into any project. Check it out on CodePen.

Traditionally toggles are hardcoded in source, typically with a preprocessor’s #ifdef feature. While this method is relatively simple it’s also not dynamic, meaning that if we need to change the toggle state for any reason we have to manually deploy a new release with the toggle configuration changed. This can cause a significant amount of disruption for the CI/CD process, impacting the feedback loop that is essential in software development.

More recently we’ve been using a type of toggle that lives side-by-side with the source code for a project. This is known as a Champagne Brunch or Canary Release and can be incredibly useful for things like Permission Toggles. These types of features are often short lived compared to other categories of Feature Toggles (for example a Champagne Brunch may live for a week or two while a Permission Toggle could stay in place for several years) and the re-configuration of these toggles is much less disruptive than having to restart a test instance in order to flip a flag.