R I S K M O N I T O R

Loading

Intelligent Cybersecurity Check for vulnerabilities now

Avoiding Multiple Labels on a Single Form Field

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


How to Fix the Problem

Each form field should be associated with a single, unique, and visible label. Multiple labels for a single input can lead to inconsistent and confusing screen reader behavior, impacting accessibility.

Correct Implementation Examples

Here are markup examples that ensure a single, clear label is associated with each input field:

html
<label for="pass1">Label</label>
<input type="text" id="pass1" />
html
<textarea id="pass2" title="Label"></textarea>
html
<label>First Name: <input type="text" id="pass3" /></label>
html
<label>Choose an option:
<select id="pass4">
<option selected="selected">Chosen</option>
<option>Not Selected</option>
</select>
</label>
html
<label>Enter your comments:
<textarea id="pass5"></textarea>
</label>

Special Case: Multiple Labels with ARIA

If multiple label texts are essential, use the aria-labelledby attribute properly, and ensure only one of them is visually accessible:

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

In such cases, screen readers will use the label referenced by aria-labelledby, while the aria-hidden="true" hides the non-relevant label from assistive technologies.

Note: Simply using aria-hidden is not sufficient. Hide any additional label using CSS to ensure clarity for screen readers.

Incorrect Implementation Examples

Avoid scenarios like the following where multiple labels are bound to one field:

html
<label for="fail1">Hi</label>
<label for="fail1">Foo</label>
<input type="text" id="fail1" />
html
<label for="fail4">First Name:</label>
<label>First Name:
<input type="text" id="fail4" />
</label>

These patterns cause inconsistent label rendering and should be revised to use only one visible label element per field.


Why it Matters

Multiple labels referencing the same input can confuse screen reader users. Depending on the browser and assistive technology, only one label may be announced—sometimes the first, sometimes the last, or in rare cases both. This inconsistency can create uncertainty and hinder form usability for users relying on assistive technologies.

By assigning only one visible label per form element, we ensure that the interface behaves predictably and inclusively across all user agents.


Rule Description

This rule checks that each form field is associated with a single label element. Redundant or multiple visible labels referencing the same control can introduce confusion and accessibility issues.


The Algorithm (in Simple Terms)

  1. For every form field (e.g., input, select, textarea), check how many labels reference it.

  2. If more than one visible label points to the same field, flag it as an error.

  3. One visible label is the goal; others, if needed, must be hidden and referenced properly using ARIA (aria-labelledby).

Leave A Comment