Checkboxes

Put a label on it

Something I often see is an incorrect setup of forms. Developers may addt to the page canvas every element they see in the designs “as is” without thinking of their meanings. Bear in mind that a browser interprets the markup by reading from top to bottom. And most of the time a browser is a simple piece of software that really just reads and doesn’t understand what it’s doing.

Checkboxes

In this case we’ll start with very simple (and wrong) markup and then we’ll enhance it more and more. To help you understand what’s wrong, we’ll then listen to a screen reader.

Simple but wrong

<input type="checkbox"> Mushrooms

In this example we have an input of type checkbox followed by the text “Mushrooms”. The browser doesn’t see any connection between these two elements. The negative side effect here is that you can only click on the checkbox to change its state. But what about people with motor impairments? The checkbox may be too small for them to click on. Besides, it would be nice to be able to click on “Mushrooms” to activate (or deactivate) the checkbox, too.

Correct setup for checkboxes

<input type="checkbox" id="pizza-topping1">
<label for="pizza-topping1">Mushrooms</label>

We identify the checkbox by giving it an ID. By doing so, we don’t just write “Mushrooms” but tell the browser that this is the label FOR our “pizza-topping1” ID. With this simple step we’ve achieved two things:

• Now the browser can make out a connection between the checkbox and the following text. They do indeed belong together.
• Now this connection has been established, the “Mushrooms” text can be clicked on as well to trigger a change for the checkbox.

The above-mentioned markup is correct, but you can do this as well:

<label><input type="checkbox"> Mushrooms</label>

It has the same effect. You’ll only hear a difference if you put your checkboxes in a list like this:

<ul>
 <li>
  <input type="checkbox" id="pizza-topping1">
  <label for=”pizza-topping1”>Mushrooms</label></li>
 <li>
  <label><input type="checkbox"> Mushrooms</label>
 </li>
</ul>

MacOSs Voiceover will say the same, but the browser extension ChromeVox will read out something slightly different.

• First line - list-item, mushrooms, checkbox not checked
• Second line - mushrooms, checkbox not checked, list-item

Video example