A toggle is a switch between two states (like on and off), with a different appearance to indicate each state. These are heavily used in modern interfaces as a more visually intuitive way to present options than plain text lists or checkboxes. But unfortunately, many toggles are inaccessible to users with screen readers and other assistive technologies. This is because the toggles are often misinterpreted by these users as “checked” and unchecked, and because of platform-specific considerations around accessibility. In this article, we’ll show you how to design a simple accessible toggle that works on all platforms and can be easily modified to suit your unique needs.
A toggle is an element that can be manipulated by clicking on it or hovering over it with a mouse cursor. When a toggle is clicked or hovered over, it turns the element on or off. It can also be moved between a visible and hidden state by using the
Toggles are also useful for implementing feature experimentation and acting as circuit breakers in your application. For example, an e-commerce company may want to see which of two suggestion algorithms performs better with its users. It can deploy an experiment toggle that splits its user base into a cohort with one algorithm enabled and the other disabled. After a few weeks, it can determine which algorithm has higher completion rates and then retire the toggle to roll out the new feature to all users.
The toggle is also a powerful tool for managing your subscription models, including when and how you hide content for specific users. Toggle permissions can be a great way to give premium features to users who upgrade and to disable them when downgrading.
Another reason for the popularity of toggles is their convenience. They allow you to hide content in a presentation view of an article without editing the article or breaking other content. However, they have some limitations and drawbacks that should be kept in mind when designing your site.
First, a toggle can only hide content when it is in the presentation view of an article. It won’t work with other views such as the article editor, map vignette, or article previews. In addition, articles with dynamic content such as spoilers can cause problems when using toggles. As a result, we recommend that you use secrets and subscriber containers for more flexibility when hiding content in multiple places and with different subscriber groups. If you need to hide content in other types of views, try using our other features such as permission toggles or articles with the hidden feature option. These features also provide more flexibility when using different display modes. For instance, you can set a toggle to hide the content in the main view of an article while leaving the vignette and other content visible for users who are reading on mobile devices.
