We detected a checkbox without an accessible name or label

We detected a checkbox without an accessible name or label — rule summary

Field	Value
Rule code	Manual_Checkbox_Name_Missing
WCAG conformance level	A
WCAG success criterion	4.1.2 Name, Role, Value
Must be fixed at source	No

Description

Checkboxes without proper labels are not perceivable to screen reader users, making it difficult to understand their purpose or functionality. All interactive elements, including checkboxes, must have an associated label that clearly communicates their function to ensure accessibility for all users.

How to fix

There are several ways to properly label a checkbox:

1. Use an explicit label element:

<label for="terms">
  <input type="checkbox" id="terms"> I agree to the terms and conditions
</label>

2. Or use a separate label element with matching for/id attributes:

<input type="checkbox" id="newsletter">
<label for="newsletter">Subscribe to newsletter</label>

3. If a visible label cannot be used, provide an aria-label:

<input type="checkbox" aria-label="Subscribe to newsletter">

4. For groups of checkboxes, include a fieldset with legend to provide context:

<fieldset>
  <legend>Select your interests:</legend>
  <div>
    <input type="checkbox" id="coding">
    <label for="coding">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="design">
    <label for="design">Design</label>
  </div>
</fieldset>