Toggle switch

Let’s talk about toggle switches and what you actually need to know right now. This information was adapted from atomica11y.com, atomic a 11 y.com, and from thebookonaccessibility.com.

Now, you notice this isn’t titled accessible Toggle Switches, because if you made a toggle switch that’s not accessible, all you really did was create crappy decoration that just looks like a toggle switch, and that’s not what we’re here to do today.

We can’t cover every possible accessibility rule and nuance about switches in this single video, but what we can cover is the practical basics. You can always find complete demos and working code examples on atomica11y.com. To be sure we’re talking about the same thing, when we say toggle switch, we mean something that allows selection of a system-wide setting, and it looks like a little switch.

Toggle switches originated from the idea of an electrical switch, something that can be turned on or off. When toggle switches were introduced as a UI element in iOS, Apple used skeumorphic design to ensure that we understood what this was. You can see that the original toggle switch looked much more like a light switch than it does now.

To make an accessible toggle switch, we must make sure that we don’t create barriers for anybody with a disability. Beginning with low vision, we’re talking about people who are using their smartphone, they’re using their desktop device, but they may be adjusting the default font size, they might be using a magnification tool, or on a handheld device, they might be pinching and zooming in. For people with cognitive differences, we’re talking about people who might have difficulty remembering information, handling complex tasks, or may just need additional time to complete tasks. For motor disabilities, we’re talking about people who are using a mouse They may be tapping on their screen, but they may be unable to do so with precision. They may also be using a keyboard to operate their device or a switch control, which is something like a game controller. They may also be using voice commands to operate their device. When we’re talking When we’re talking about blindness, we’re talking about people who are using their desktop machine, they’re using a smartphone, but they’re also using an application called a screen reader in combination with a keyboard or on a touch device, a series of swipes and taps in order to operate their device.

To accommodate people with low vision, we want to start by making sure the text can resize up to 200% with no loss of information. This is different from hitting Command or Control plus on your browser and zooming in in this way. This is literally changing the default size of fonts up to 200%. People who adjust the smartphone text size would probably say they don’t even have a disability. They just like their text to be easier to read.

We must make sure text has a minimum of 4.5 to 1 minimum contrast ratio and that the switch indicator has a minimum of 3 to one minimum contrast ratio. We also must ensure that the switch indicator is in visual proximity to the label. Now, let’s talk about what that means.

Because toggle switches originated on a small mobile screen, they were always in proximity to their label. However, on the web, where screens are much, much larger, we must ensure that something like this doesn’t happen, where the switch is placed far, far away from the label. This is important for people with low vision because some may be using a magnification tool that zooms way, way in on their screen.

For them, when they come to switches where the label is not in proximity to the indicator, it’s very difficult to understand what these switches are, what they can accomplish without scrolling far to the left and far to the right. This is not a good user experience for anybody.

One in twelve men and one in 200 women have difficulty perceiving the differences between colors. We commonly call this color blindness. We cannot use color alone as the only means of conveying information like on or off.

For people with motor disabilities, it’s important that the Click and Tap target area include the label and be no smaller than 24 by 24 pixels. To meet AAA requirements, we must meet 44 by 44 pixels of clickable or tappable target area. You’ll notice as the mouse moves through, it can click on the label or the switch to activate or deactivate the switch.

For people using assistive technology, there is a specific set of actions and gestures that we must accommodate. For people using a keyboard or for people using a screen reader in combination with a keyboard, when they use the tab key, focus will visibly move to the switch. When they press the space bar, that toggles the switch between on or off states. For people using a mobile screen reader, when they swipe left or right, they move focus to the switch. And when they double tap, the switch toggles between on and off. When a switch is in focus, the screen reader will read its name, role, state, and group. The name must be purposeful and clear. It must identify itself as a switch, a toggle button, or in some cases, it may identify as a checkbox. It must express its state, whether it’s on or off, or in some cases, it may say checked or unchecked. It could be disabled or dimmed. Hint to descriptions or errors are read after the label, and a group of switches will also state its name.

For people using the keyboard, the focus indication must be visible in some way to meet AA requirements. However, it’s often easier to meet AAA requirements and simply provide a three to one minimum contrast ratio border against default and adjacent elements.

Let’s listen to an example of a screen reader reading switches. You’ll hear that its name and purpose is clear, it identifies itself as a switch, it expresses its state, and any hints or your error descriptions are read after the label, and the group name is also read.

Privacy settings. Share image location, on switch. Privacy settings, off. Share image location, switch. Manually approved tags, off. Switch. Privacy settings, on. Manually Approved Tags, switch, share photos. When you share photos, they will be visible to all your friends and followers, on. Switch, privacy settings.

On the web, we want to give groups of switches a name. This is more than just a larger text heading above the group. Switches should be wrapped inside of a fieldset and a legend. This is what gives them a group name. It can be tempting to put the state of the switch in the label, but don’t do that. Do not change the label based on the state. When the call blocking is set to on, and we say that in the label, it is self reinforcing. However, when call blocking is off, we now created a double negative. So call blocking off is off. Do I have to turn call blocking on for call blocking to be off? It suddenly doesn’t make any sense. This can be very confusing for people using a screen reader. Just leave the label alone. You’re your UI writing and the use of a switch is clear enough without the label containing the state.

And don’t imply other states in the label. This label is particularly destructive because not only does it create a double negative, but it also implies that the switch itself is not currently functional and that it is itself disabled.

We don’t want to use toggle switches to overcomplicate things. For example, in the case of light mode or dark mode, there is no need to actually have a light mode label. In experiences where there are only binary settings and it’s well understood, it’s enough to simply have a dark mode switch. You can give your users some credit.

We mustn’t use toggle switches in place of checkboxes or radio buttons. I cannot on or off my shipping address matches billing. I cannot on or off the terms and conditions, but I can confirm these are true by checking a checkbox. Let’s imagine we have a view in our web page that allows us to choose between light and dark roast on the page. First of all, this is an inappropriate use of a toggle switch because it’s not a site-wide setting. Instead, use radio buttons to choose between the two differently named options. This would also be an appropriate use case for tabs.

When is it okay to deviate from accessibility and break the rules? Maybe you saw Apple or Google do something. Well, look, just because Apple and Google are big, successful companies, doesn’t mean everything they do has people with disabilities in mind from the beginning. Maybe your manager thinks that an inaccessible pattern looks cool or using a toggle switch in a place where it doesn’t belong is really neato. As a developer, as a designer, it’s your job to advocate for people who use your product. Let’s do the right thing. Maybe you’re on a tight deadline and someone is saying, Listen, we just don’t have time for all this accessibility stuff. It doesn’t take any longer to create accessible toggle switches than it does inaccessible toggle switches. Maybe your devs are saying that it’s just not possible to make an accessible toggle switch. Look, that’s nonsense. There are plenty of examples on Atomic A11y they can use to create an accessible toggle switch.

And that’s the end. Go forth and come back when you need help. You can always find code and acceptance criteria at atomica11y.com. And if you’re building an enterprise accessibility program, thebookonaccessibility.com is for you. Thank you.