Form fields do not have duplicate labels

Rule ID: form-field-multiple-labels
Ruleset: axe-core 3.2
User Impact: Moderate
WCAG: 3.3.2

Learn Web Accessibility

Subscribe to our extensive curriculum of online self-paced courses

Compliance Data & Impact

User Impact

Disabilities Affected

  • Blindness
  • Low Vision
  • Deafblindness
  • Mobility/Dexterity

Requirement(s)

  • WCAG 2.1 (A): MUST
  • WCAG 2.0 (A): MUST
  • Section 508: MUST

WCAG Success Criteria

  • 3.3.2 Labels or Instructions

Section 508 Guidelines

  • 1194.22 (n) Information required to complete electronic forms online

How to Fix the Problem

A common mistake when marking up forms is that authors accidentally assign two labels to a single form field. Intentionally assigning multiple labels is not a common practice; it creates code that is difficult to maintain.

The following example FAILS the Form fields do not have duplicate labels rule:

<label class="sr-only" for="nmr">Number of products</label>
<label><input type="text" id="nmr" /> pizza’s</label>

The following example PASSES the Form fields do not have duplicate labels:

<input type="text" id="nmr" aria-label="number of pizza's" /> pizza's</label>

Why this is Important

Intentionally assigning multiple labels is not a common practice; it creates code that is difficult to maintain and elements not widely supported by assistive technologies.

Rule Description

Ensures form field does not have multiple label elements.

The Algorithm (in simple terms)

Ensures form field does not have multiple label elements.

Resources

Refer to the complete list of axe 3.2 rules.