Checkbox

Welcome to Checkboxes.

Let’s discuss what you actually need to know right now about building accessible checkboxes. Firstly, notice this lesson isn’t titled accessible checkboxes, because if you create a checkbox that isn’t accessible, all you really did was create decoration, and that’s not what we’re here to do today. All of this information is adapted from atomically.com atomic a11y dot com and from TheBookOnAccessibility.com.

Let’s begin. We can’t possibly cover every accessibility rule and nuance about checkboxes, but we can cover the practical basics, enough that you understand that there are requirements about the way that we use checkboxes, and you’ll remember to go look up information when you have questions rather than trying to do something strange or clever that doesn’t work for anybody. Just to make sure we’re talking about the same thing, a checkbox is an input that allows you to select one or multiple inputs. So you might have a singular checkbox that allows you to agree to terms and conditions. You might have multiple checkboxes that allow you to make multiple selections of, say, your favorite NATO letters.

When we’re talking about accessibility, we’re talking about how to remove any barriers to our checkboxes that people with disabilities might encounter. When we’re talking about people with low vision, we’re talking about people who use a smartphone or use their desktop machine, but they just need the text to be larger, or they might pinch or zoom in on their smartphone. They might use a magnification tool to view things on their desktop machine. Not everybody sees colors the same way. So we want to make sure that we’re designing for people in such a way that doesn’t become an obstacle. People with motor disabilities may not be able to use a mouse or tap on their smartphone screen. They may use a keyboard or a switch control. That’s something akin to a joystick. They use voice control to control their machine or their smartphone. When we’re talking about people who are blind or very low vision, we’re generally talking about people who are unable to perceive what’s happening on their screen. So they use applications called a screen reader. They will interact with their machine, either through the keyboard or by swiping on their screen to move sequentially through their application as it’s read to them by the screen reader.

It’s so very important that we begin our designs thinking about people with low vision. Now, I know everybody wants to start with a screen reader because they may have seen a screen reader demo and think that’s really cool, and it is. But when we start by designing for people with low vision, we actually solve a whole host of accessibility issues that we may run into later. We’re also designing for people who may say they don’t even have a disability. They’ve simply adjusted the text size on their smartphone. Your checkbox text must be able to resize up to 200% with no loss of information. Now, this is different from hitting Command or Control Plus on your browser and zooming in that way. We’re talking about literally making the font size 200% larger and all of your information still fits on screen. Now, this isn’t just important for people with a low vision. If your application is ever going to be internationalized into other languages, this becomes crucial, especially if you’re going from an English to a French translation.

The text must have a a minimum of 4.5:1 contrast ratio, and the checkbox indicator must have a 3:1 minimum contrast ratio. The label and the indicator need to be in visual proximity to each other. It’s very important that we don’t flip the checkbox direction, and we don’t separate the text label from the checkbox.

Some people with low vision use an application called a magnifier that literally zooms way, way in on their screen. When the indicator and the label are far apart from each other, it becomes very difficult to discover what the label of this checkbox is.

Also, please don’t make checkboxes act or look like radio buttons. This can just be very, very difficult for people with low vision. It’s called a checkbox, not a check circle.

Color alone cannot be used as the only way we describe whether a checkbox is checked or not. 2% of the population cannot tell the difference between these three checkboxes because they may not be able to perceive red or green color differences.

The clickable, tappable target area of our checkbox must include the label, and to meet AA requirements, be no smaller than 24 by 24 pixels. To meet AAA requirements, it must be 44 by 44 pixels.

For people using assistive technology, there are prescribed keyboard and screen reader actions and mobile screen reader gestures for navigating and using checkboxes.

When someone uses uses the keyboard or the keyboard and screen reader in conjunction, they will use the tab key to focus the checkbox, and the space bar toggles the checkbox between states of checked or unchecked. For people using a mobile screen reader, they will swipe left or right on their screen and double tap to toggle the checkbox between checked or unchecked states. Any screen reader will read the name, role, and state, and also any group information about the checkbox.

Let’s look at an example of using a keyboard. Using the tab key to move focus, and the space bar to toggle the checkbox on and off. Let’s listen to a screen reader reading a checkbox. You’ll notice it reads the name, role, and state, and it also reads the group name of this checkbox. Choose your favorite NATO letters. Alpha, unchecked. Checkbox. Choose your favorite NATO letters. Bravo. Unchecked. Checkbox. Choose your favorite NATO letters. Charlie. Unchecked. Checkbox. Choose your favorite NATO letters. Checked. Charlie. Checkbox.

Some specialty use cases of checkboxes might include something like these checkbox cards. When you’re creating checkbox cards, the card can be clickable anywhere, but only the checkbox itself should receive keyboard and screen reader focus with the additional text being read afterward by the screen reader.

Let’s be sure that we don’t break the mental model of how checkboxes work.

Checkboxes should never be used to make detractive no choices. Checkboxes are for affirming yes choices. If we have an application that’s letting us choose pizza toppings, we wouldn’t create checkboxes that allow us to check that we don’t want something. Instead, let the checkboxes be confirming choices. If pepperoni is checked, it’s easy to understand that pepperoni will be included as a pizza topping.

And don’t misuse other inputs in place of checkboxes.

A switch might look cool. However, its semantics are completely different in what it reads to the screen reader. A switch reads as on or off for its state. I can’t on or off agree to the terms and conditions.

And don’t use a single radio selection in place of a checkbox because it cannot be unselected. Simply use a checkbox.

What are some reasons to break the rules? Are there times when it’s okay to deviate from accessible patterns?

What if you saw Apple or Google do this? That doesn’t necessarily mean that Apple or Google had people with disabilities in mind when they created that particular application or website. Maybe your manager thinks something inaccessible looks really cool. It’s your responsibility to advocate for all people who are going to be using your application. Perhaps you’re on a tight deadline, and accessibility just seems like another requirement. But I can assure you that it doesn’t take any longer to create an accessible checkbox than it does to create an inaccessible checkbox. Maybe your developer team is making up some story about how it’s not possible to create an accessible checkbox, but I can assure you they are definitely wrong. And there are plenty of code examples that they can use on AtomicA11y.com that will help them create accessible checkboxes every time.

And that’s the end. Go forth, create checkboxes, and come back to this video whenever you need help. You can always reference material on Atomic A11Y or atomica11y.com or if you’re trying to create an enterprise accessibility program, TheBookOnAccessibility.com is written just for you. Thank you.