Avoid assigning multiple labels to a single form field

WCAG 3.3.2
Labels or Instructions

Content available in English only.

Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).

These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.

Each form field must have a single clear label; extra guidance should use aria-describedby.

Why this matters and how to fix it

Why this matters

Screen readers derive an input's accessible name from its label. If multiple labels reference the same input, only one label may be announced, or the text may be combined in a confusing or unpredictable way. This makes it unclear what information users are expected to enter.

How to fix this issue

Ensure each form input has a single <label> that provides its accessible name. If additional explanation or guidance is needed, link it via aria-describedby so it is read after the label without replacing it.

Automated detection · Manual review recommended

Developer guidance

This issue appears frequently when design systems allow both labels and placeholders, or when help text is incorrectly implemented using additional <label> elements. Standardize form components so each has exactly one accessible name source, with supplementary guidance linked through aria-describedby.

Code examples

Incorrect Implementation

<label for='email'>Email</label>
<label for='email'>Your email</label>
<input id='email'>

Correct Implementation

<label for='email'>Email address</label>
<input id='email' aria-describedby='email-hint'>
<small id='email-hint'>We'll never share your email.</small>

Real-World Examples

Before

<div class='form-row'>
  <label for='zip'>ZIP</label>
  <span class='field-label'>Postal Code</span>
  <input id='zip'>
</div>
<!-- The visual 'Postal Code' text is not associated properly and duplicates the label concept -->

After

<div class='form-row'>
  <label for='zip'>Postal code (ZIP)</label>
  <input id='zip' aria-describedby='zip-hint'>
  <small id='zip-hint'>Use 5 digits.</small>
</div>

CSS Example (Guidance)

/* If visual emphasis is needed instead of duplicate labels */
.field-label { font-weight: 600; display: block; }

Manual testing

  1. 1. Turn on a screen reader (NVDA, VoiceOver, or TalkBack).
  2. 2. Navigate to the input using Tab or Arrow navigation.
  3. 3. Listen to what is announced.
  4. • Expected: One clear label is spoken first, followed by any help text.
  5. • Failure: Multiple label names are spoken, or announcements sound repetitive or confusing.
  6. 4. Inspect the element in the browser Accessibility Tree and confirm the input has exactly one accessible name source (<label> or aria-label).
  7. 5. Confirm that any additional explanation appears under 'description' (via aria-describedby), not as a second label.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance