Skip to main content
Accessibility Pro
Startscanning

Fix guides · WCAG 2.2

Fixing duplicate IDs that break labels

1.3.1 Info and Relationships · Level A W3C: Understanding 1.3.1

An id must be unique in the page. When two fields share one, a <label for> or an aria-labelledby can only point at the first, so the second field loses its label. The sample has two inputs with id="qty".

Who this affects: People who use screen readers or voice control, for whom the second field has no name, or the wrong one.

The failing markup

<main id="main">
  <h1>Gift order</h1>
  <form action="/order">
    <label for="qty">Quantity</label>
    <input type="number" id="qty" name="quantity">
    <label for="qty">Gift-wrapped quantity</label>
    <input type="number" id="qty" name="wrapped">
    <button type="submit">Order</button>
  </form>
</main>

How to fix it

  1. Give every element a unique id. In components rendered more than once, generate the id from a prefix and an index or a framework id helper.
  2. Point each label and ARIA reference at the id that is now unique to its field.

The change

<main id="main">  <h1>Gift order</h1>  <form action="/order">    <label for="qty">Quantity</label>    <input type="number" id="qty" name="quantity">Removed:     <label for="qty">Gift-wrapped quantity</label>Removed:     <input type="number" id="qty" name="wrapped">Added:     <label for="qty-wrapped">Gift-wrapped quantity</label>Added:     <input type="number" id="qty-wrapped" name="wrapped">    <button type="submit">Order</button>  </form></main>

Verified by the scanner

On 2026-09-13 both versions of this sample were run through Accessibility Pro's scan pipeline with arc-style, axe-core, ibm-equal-access, pa11y, focus-graph. The failing markup was reported as:

  • arc-style: duplicate-id, WCAG 4.1.1
  • ibm-equal-access: ibm-form_label_unique, WCAG 1.3.1

The fixed markup produced no findings at all. To run the same check on every pull request, use the accessibility GitHub Action; how accurate the scanner is overall is in the published benchmark.

Worth knowing

  • WCAG 2.2 removed 4.1.1 Parsing, which used to fail every duplicate id. A duplicate that nothing references is no longer a WCAG failure, and the scanner does not gate a build on 4.1.1. A duplicate that a label or ARIA attribute references still fails, as 1.3.1 or 4.1.2.