How to Make an Accessible Toggle

Toggle (also tgl) is an on/off switch that turns something on when you push it and off when you release it. It’s a key element of most interfaces and can be used to enable complex functionality such as a chat bot or even an entire new UI. In this article we’ll be exploring how to make an accessible toggle that you can use in your own projects, and in particular a purely HTML + CSS only implementation.

Oftentimes when designing a new UI for your product you need to provide multiple options to your users to help them navigate and find the best path through your product. A toggle switch is a great way to do this as it provides a simple on/off option that’s easy for your users to understand and interact with.

A common approach to using toggles is to place a large toggle in a location with enough space to accommodate it. Typically these toggles are placed within forms or full pages of information. While a large toggle is good for these situations where you need to display visible label text alongside the toggle action text, smaller toggles are also a common design pattern for enabling features in condensed spaces like within data table rows.

Savvy teams realize that Feature Toggles have a carrying cost and they seek to keep this inventory as low as possible. One way to do this is by adding a task to the team backlog for removing toggles as they become redundant or superfluous. Another common strategy is to put “expiration dates” on toggles – this allows teams to rely on automated tests or CI/CD processes to remove toggles that aren’t needed any longer.