Checkbox Labels
Give every checkbox a descriptive label that states what selecting it means, and associate the label with the control so assistive technology and the clickable target work correctly.
Write a clear label for every checkbox and programmatically associate that label with the control.
Key details
Further guidance
Association
In HTML, associate the label and checkbox explicitly where possible so the accessible name and clickable area are reliable.
Label Text
The visible label should describe the purpose or choice represented by the checkbox.
Placement
For left-to-right layouts, checkbox labels are conventionally placed to the right while remaining visually close to the control.
Practical Application
Write the label as the actual choice or state the checkbox controls, keep it visually adjacent, and associate it programmatically so the same wording is available to pointer, keyboard, and assistive-technology users.
Reader Check
Without seeing surrounding layout, would the label still tell a user what checking the box means?
Worked Example
Use “Email me a receipt” beside the checkbox rather than a vague label such as “Yes,” and connect that text to the checkbox in the markup.
Sources and evidence
Sources are shown with the role they play in this guide. Historical or style-sensitive claims are kept within the evidence boundary described above.
- Labeling Controls — W3C WAI Forms Tutorial (opens in a new tab)W3C Web Accessibility Initiative · Descriptive labels for checkboxes and explicit label/control association