Checkbox element accessibility label

A Checkbox Element Accessibility Label ensures that checkbox elements within your app are properly labeled and fully accessible to users relying on assistive technologies like screen readers. Proper labeling of checkboxes means that both the name and the value of the checkbox are communicated to screen readers, allowing users to understand and interact with these elements effectively.

Success criteria

The rule checks for the following potential violations:

• Checkbox elements without an associated label.
• Labels that are not properly linked to their corresponding checkbox elements.
• Labels that are not descriptive enough to provide context about the checkbox option.

How to fix?

To fix violations related to checkbox element accessibility labels, follow these steps:

• Associate labels with checkboxes:
  • Use contentDescription to provide the accessibility label to the checkbox.
• Provide descriptive labels:
  • Ensure that the label text clearly describes the purpose of the checkbox.
  • Avoid using ambiguous or single-word labels.

Example

The following example scan report highlights that the checkbox element lacks an associated label, making it inaccessible to users relying on screen readers.

Fix
To correct this violation, associate a label with the checkbox element through the labelFor attribute or provide a meaningful contentDescription or hint for a clear description of it’s purpose.

References

• Learn more about Resize Text WCAG: 2.1 - 1.3.1 (Level A) guideline
• Learn more about Resize Text WCAG: 2.2 - 1.3.1 (Level A) guideline