The label itself should be clickable
Aliases: label for · expanded hit target · wrapping label
What it is
The text beside a checkbox is not a caption; it is a clickable label. Clicking the square and clicking “agree to the privacy policy” must produce the same toggle. If only those few pixels of box respond, people tap the words, see nothing happen, and conclude the control is broken. Making the label a target is about hit area, not about turning the row into a different kind of switch.
Why it happens
The box itself is often sixteen to twenty pixels — far smaller than a finger or a coarse pointer. Aiming is centred on the words: the eye finishes the label, then the hand lands on the phrase just read, rather than backing up to the square. If label and control are only visually adjacent and not the same target in the input model, a click on the text is a click on empty space.
Two implementations fail the association: the label does not wrap the control, or the text is non-focusable decoration. Both still “look labelled,” yet assistive tech may hear no name and pointer users cannot hit it. After wrapping, the label grows taller; the hit rectangle must grow with it, not remain a sliver beside the first line.
Studying it
Use a Fitts-style pointing task that compares box-only versus label-also-counts. Same sentence, same resulting tick; the independent change is the target rectangle.
Independent variables: hit region (box, box-plus-label, whole row), number of label lines, pointer versus touch. Dependent variables: first-hit success, clicks on text that do nothing, time to finish a set of ticks, accidental hits on a neighbour.
On touch, log the contact centroid, not merely “clicked the label.” A centroid on the words while the system only honours the box is direct evidence the rule is broken.
Where it stops holding
Table checkboxes often have no adjacent sentence; the name lives in a header or row title. The larger target is then the cell or the row, not a phrase glued to the box — still bigger than the square, different geometry. When the label contains a link, the link and the tick compete for the same words: “privacy policy” should open the document, the rest of the sentence should toggle; the two hit regions must be split. Disabled items should still occupy space, but a click must not silently succeed. Keyboard users toggle the focused checkbox with space and do not depend on a clickable label; that path is not an excuse to shrink the pointer target.
Applying it
- Bind the copy and the box as one control so either end toggles the same state.
- Let the hit rectangle cover the box plus the entire text; multi-line labels must be clickable as a block, not only on the first line.
- If the label contains a link, give the link its own target and separate it visually from the tick wording.
- How to check: hide the box stroke, leave only the words, and ask someone to complete the ticks. No response on the text, or a hit on a neighbour, means the label was never made a target.