Referenced ID is assigned more than once

ids/duplicate

WCAG success criterion: 4.1.2 (level A)
Outcome class: Hint only. An automated check that by design reports review hints only: its findings are marked for manual review, never as confirmed violations.
Area: Accessibility, Technical Robustness
Default severity: critical
axe-core rule: ids/duplicate

Why we flag this

Assistive technology cannot resolve the relationship unambiguously and announces the name or description of the wrong element.

The same ID occurs more than once in the DOM and is referenced by a for, headers or aria attribute.

What the rule checks

Scope. id values that an IDREF attribute (for, aria-labelledby, aria-describedby, aria-controls, headers, list, ...) in the same tree refers to.

Expectation. Asks for review at the second element carrying an id that occurs more than once in the same tree and is referenced: the reference resolves to the first element, and whether that is the intended one cannot be told from markup. A duplicate id nobody references breaks no relationship (4.1.1 was removed in WCAG 2.2): nothing to report. IDs are scoped per tree, so the same id in the light DOM and inside a shadow root is not a duplicate. Applies whether the reference is native (label for) or ARIA (aria-describedby). One review per duplicated id.

Source. WCAG 2.2 SC 4.1.2 Name, Role, Value (review); HTML §3.2.6 the id attribute (unique in its tree); DOM getElementById / IDREF resolution

Detection: shared; needs dom.

Failing example

The check flags this for review. Corpus case duplicate_id, element input#email. The page may contain further findings for other rules.

duplicate_id.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Duplicate id corpus case</title>
</head>
<body>
    <main>
        <h1>Duplicate id attributes</h1>
        <!-- Unreferenced duplicate: no WCAG 2.2 criterion since 4.1.1 was removed. -->
        <div id="content-block">First block</div>
        <div id="content-block">Second block with the same id</div>
        <!-- Referenced duplicate: the label's IDREF no longer resolves to one element (4.1.2). -->
        <form action="/subscribe" method="post">
            <label for="email">E-mail</label>
            <input id="email" name="email" type="email">
            <input id="email" name="email-confirm" type="email" aria-label="Confirm e-mail">
            <button type="submit">Subscribe</button>
        </form>
    </main>
</body>
</html>

Passing example

The check passes here and reports nothing. Corpus case duplicate_id, element div#content-block. The page may contain further findings for other rules.

duplicate_id.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Duplicate id corpus case</title>
</head>
<body>
    <main>
        <h1>Duplicate id attributes</h1>
        <!-- Unreferenced duplicate: no WCAG 2.2 criterion since 4.1.1 was removed. -->
        <div id="content-block">First block</div>
        <div id="content-block">Second block with the same id</div>
        <!-- Referenced duplicate: the label's IDREF no longer resolves to one element (4.1.2). -->
        <form action="/subscribe" method="post">
            <label for="email">E-mail</label>
            <input id="email" name="email" type="email">
            <input id="email" name="email-confirm" type="email" aria-label="Confirm e-mail">
            <button type="submit">Subscribe</button>
        </form>
    </main>
</body>
</html>

This page is generated from the rule catalogue and the rule contracts; see therule overview for how the outcome classes are derived.