Checkboxes need a real label, not text sitting next to them

The problem

A checkbox with text next to it renders the same whether that text is a <label> or a <div>. The difference only shows up when someone tries to use it: with a real label, clicking the words toggles the box and a screen reader announces what the box is for. Without one, the words are decoration and the only target is a ~16px square.

This slips through visual review every time, because visual review cannot see it.

Try it

Click the text, not the box, in each row.

A <label> without a for attribute is not automatically associated with anything. It only works if the input is nested inside it, or if for matches the input's id.

Do

<input type="checkbox" id="billing-updates" name="billing-updates" />
<label for="billing-updates">Email me about billing</label>

Or nest, which needs no id at all:

<label>
  <input type="checkbox" name="billing-updates" />
  Email me about billing
</label>

Don't

<!-- No association: the text is inert -->
<input type="checkbox" id="billing-updates" />
<span>Email me about billing</span>

<!-- Also no association: `for` is missing -->
<input type="checkbox" id="billing-updates" />
<label>Email me about billing</label>

Why

• Hit area. The label becomes part of the control's click target. A 16px box turns into a full line of text — the difference between fiddly and effortless on touch.
• Screen readers. An associated label is the control's accessible name. Without it, the control announces as "checkbox, unchecked" with no indication of what it governs.
• Required by WCAG. 1.3.1 Info and Relationships and 4.1.2 Name, Role, Value.

Related

Labels have one more rule that bites specifically on consent checkboxes — see interactive content inside labels.