Form field must not have multiple label elements

Rule ID: form-field-multiple-labels
Ruleset: axe-core 4.10
User Impact: Moderate
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Trusted Tester, EN 301 549
 

Learn Web Accessibility

Subscribe to our extensive curriculum of online self-paced courses

Compliance Data & Impact

User Impact

Moderate
▼
Minor
Critical

Disabilities Affected

  • Blind
  • Low Vision
  • Deafblind
  • Mobility

Standard(s)

  • WCAG 2.1 (A)
  • WCAG 2.0 (A)
  • WCAG 2.2 (A)
  • Trusted Tester
  • EN 301 549

WCAG Success Criteria [WCAG 2.1 (A)]

  • 3.3.2: MUST: Labels or Instructions

WCAG Success Criteria [WCAG 2.0 (A)]

  • 3.3.2: MUST: Labels or Instructions

WCAG Success Criteria [WCAG 2.2 (A)]

  • 3.3.2: MUST: Labels or Instructions

Trusted Tester Guidelines

  • 5.C: MUST: The combination of the accessible name, accessible description, and other programmatic associations (e.g., table column and/or row associations) describes each input field and includes all relevant instructions and cues (textual and graphical).

    How to Fix the Problem

    Ensure that only one label is assigned to a form field.

    Correct markup solutions

    The form-field-multiple-labels rule contains five markup patterns that pass analysis: 

    <label for="pass1">Label</label>
<input type="text" id="pass1" />

<textarea id="pass2" title="Label"></textarea>

<label>First Name: <input type="text" id="pass3" /></label>

<label>Choose an option:
    <select id="pass4">
        <option selected="selected">Chosen</option>
        <option>Not Selected</option>
    </select>
</label>

<label>Enter your comments:
    <textarea id="pass5"></textarea>
</label>

    Caution: Screen Reader and Browser Combinations Inconsistently Support Multiple form Element Labels

    The following markup examples work across the following screen reader and browser combinations documented here as of the axe-core 3.4.0 release. See Multiple Labels on a Single Input for further information on screen reader and browser testing combinations. 

    <input type="checkbox" id="D" aria-labelledby="E"/>
    <label for="D" aria-hidden="true">Please</label>
    <label for="D" id="E">Excuse</label>

<input type="checkbox" id="F" aria-labelledby="G H"/>
    <label for="F" id="G" aria-hidden="true">Please</label>
    <label for="F" id="H">Excuse</label>

<input type="checkbox" id="I"/>
    <label for="I" style="display:none">Please</label>
    <label for="I">Excuse</label>

    Confirm the existence of one visible label per form element. to achieve correct functionality across most screen reader and browser combinations. Using the aria-hidden attribute alone is not sufficient and you need to hide additional labels using CSS.

    Incorrect markup examples

    The form-field-multiple-labels rule contains nine markup patterns that fail analysis: 

    <label for="fail1">Hi</label>
<label for="fail1">Foo</label>
<input type="text" id="fail1" />

<label for="fail2">label one</label>
<label for="fail2">label two</label>
<input type="checkbox" id="fail2" />

<label for="fail3" id="l1">label one</label>
<label for="fail3">label two</label>
<input type="checkbox" id="fail3" aria-labelledby="l1" />

<label for="fail4">First Name:</label>
<label>First Name:
    <input type="text" id="fail4" />
</label>

<label for="fail5">Choose an option:</label>
<label>Choose an option:
    <select id="fail5">
        <option selected="selected">Chosen</option>
        <option>Not Selected</option>
    </select>
</label>

<label for="fail6">Enter your comments:</label>
<label>Enter your comments:
    <textarea id="fail6"></textarea>
</label>

<label>Enter your comments:
    <label>Enter your comments:
        <textarea id="fail7"></textarea>
    </label>
</label>

<label>Enter your comments:
    <label>Enter your comments:
        <label>Enter your comments:
            <textarea id="fail8"></textarea>
        </label>
    </label>
</label>

<label for="fail9">Enter your comments:</label>
<label>Enter your comments:
    <label>Enter your comments:
        <label>Enter your comments:
            <textarea id="fail9"></textarea>
        </label>
    </label>
</label>

    Why it Matters

    Assigning multiple labels to the same form field can cause problems for some combinations of screen readers and browsers, and the results are inconsistent from one combination to the next. Some combinations will read the first label. Some will read the last label. Others will read both labels.

    Rule Description

    Ensures form field does not have multiple labels.

    The Algorithm (in simple terms)

    Ensures form field does not have multiple labels.

    Resources

    Deque University Course Pages (subscription required)

    Contribute to axe-core on GitHub

    Other Resources

    You may also want to check out these other resources.

    Refer to the complete list of axe 4.10 rules.

    Was this information helpful?

    You have already given your feedback, thank you..

    Your response was as follows:

    Was this information helpful?
    Date/Time feedback was submitted: