duplicate-id

IDs must be unique

automaticWCAG 4.1.1 (A)confidence: highseverity: moderaterobust

Checks that every non-empty id attribute value is unique within its own document or shadow tree.

Applies to. Applies to any element carrying a non-empty id attribute. Visibility is irrelevant. A duplicate id breaks the same lookups whether the element renders or not, which is why ACT 3ea0c8 evaluates hidden elements too.

Expectation. No other element in the same tree carries the same id value, compared exactly as written (id="a " and id="a" are different ids). Ids are scoped per document tree and per shadow tree, so the same id inside two different shadow roots is not a duplicate.

What a finding reports.

  • reasonCode: DUPLICATE_ID_IN_SHADOW_TREE when the elements are in one shadow tree, which script builds and the page's served markup does not hold; DUPLICATE_ID otherwise. Both fail the same way.
  • id: the duplicated id.
  • count: how many elements in the same tree carry it.

These data.details fields help to read and reproduce a finding. Apart from reasonCode and the few fields Output schema names as stable, they are not a stable contract: a field may be renamed or dropped in a minor release, so don’t build on them.

Examples

pass
<div id="section-1">First</div>
<div id="section-2">Second</div>

Each element has a distinct id.

can't tell
<div id="section-1">First</div>
<div id="section-1">Second</div>

The id section-1 is used by two elements in the same tree, breaking <label for>, fragment links, and getElementById.

How to check

When this rule can’t decide, it reports cantTell and leaves the question to a person. Each question it can ask is listed here under its reason code, with the steps to answer it. A finding carries the same steps as howToCheck, in the scan’s language. See Output schema.

DUPLICATE_ID

  1. Inspect the elements the report names and note the shared id.
  2. Check whether anything refers to that id: a label's for, an aria-* attribute such as aria-labelledby, or a link to #the-id.
  3. If something refers to it, follow the reference (click the label or link, or read the name in the Accessibility pane) and check that it reaches the intended element.
  4. Check which WCAG version and standard the audit applies; under WCAG 2.2 or 2.0/2.1 with the 2023 errata, 4.1.1 is satisfied for HTML.

Pass. Nothing breaks because of the duplicate (references reach the intended element) and the audit uses WCAG 2.2 or 2.0/2.1 with the errata, under which 4.1.1 is satisfied.

Fail. A label, ARIA reference or link reaches the wrong element (WCAG 1.3.1 or 4.1.2), or the audit follows a standard that keeps 4.1.1's text, such as EN 301 549 V3.2.1, where duplicate ids fail 4.1.1 (F77).

DUPLICATE_ID_IN_SHADOW_TREE

  1. Inspect the elements the report names, inside the same shadow root, and note the shared id.
  2. Check whether anything refers to that id: a label's for, an aria-* attribute such as aria-labelledby, or a link to #the-id.
  3. If something refers to it, follow the reference (click the label or link, or read the name in the Accessibility pane) and check that it reaches the intended element.
  4. Check which WCAG version and standard the audit applies; under WCAG 2.2 or 2.0/2.1 with the 2023 errata, 4.1.1 is satisfied for HTML.

Pass. Nothing breaks because of the duplicate (references reach the intended element) and the audit uses WCAG 2.2 or 2.0/2.1 with the errata, under which 4.1.1 is satisfied.

Fail. A label or ARIA reference in the component reaches the wrong element (WCAG 1.3.1 or 4.1.2), or the audit follows a standard that keeps 4.1.1's text, such as EN 301 549 V3.2.1, where duplicate ids fail 4.1.1 (F77).

View source