Form elements must have labels

Log in (Premium content) Request a demo

Rule Description

Each form element must have a programmatically associated label element.

The Algorithm, in Simple Terms

Ensures that every form element has a programmatically associated label

Why this is Important

Adding effective form labels is absolutely necessary to make forms accessible. The purpose of form elements such as a checkboxes, radio buttons, input fields, etc. is often clear for sighted users, even if the form element is not programmatically labeled. This isn't usually the case for screen reader users. Adding a label to all form elements eliminates ambiguity and contributes to a more accessible product.

How to Fix the Problem

Programmatically associate labels to all form controls and ensure there are no duplicate labels. You can do so by using an implicit <label>, explicit <label>, aria-label or aria-labelledby.

Compliance Data & User Impact

User Impact: Critical
Disabilities Affected:
  • Blindness
  • Deafblindness
  • Low Vision
  • Mobility/Dexterity
Issue Type:
  • WCAG 2.0 (A): MUST
  • Section 508: MUST
WCAG Success Criteria:
  • 1.3.1 Info and Relationships
  • 3.3.2 Labels or Instructions
Section 508 Guidelines:
  • 1194.22 (n) Information required to complete electronic forms online

Related Deque University Course Pages

Related Deque Code Library Examples

Other Related Resources

Additional Information

Relevant Technologies:
  • HTML 4
  • HTML 5
  • ARIA
Relevant Custom Widget Type(s):
  • Checkbox/Checkbox Group (ARIA)
  • Radio Button/Radio Group (ARIA)
  • Textbox (ARIA)
Test Reliability: Automated testing is possible, with high accuracy
Rule ID: label