duplicate-id-aria

IDs referenced by ARIA must be unique

automaticWCAG 4.1.2 (A)confidence: highseverity: seriousrobust

Checks that any id value referenced by an ARIA ID-reference attribute (aria-labelledby, aria-describedby, aria-owns, aria-controls, aria-activedescendant, aria-flowto, aria-errormessage, aria-details) is unique in the document.

Applies to. Applies when the document contains at least one non-empty aria-labelledby, aria-describedby, aria-owns, aria-controls, aria-activedescendant, aria-flowto, aria-errormessage, or aria-details attribute (i.e. at least one ARIA ID reference exists to resolve).

Expectation. For every id value referenced by one of those attributes, exactly one element in the document carries that id. A duplicate does not break the reference: it resolves to the first element in tree order, so the name is still computed. Whether that element is the intended target depends on author intent, which markup does not carry, so the outcome is cantTell.

What a finding reports.

  • id: the duplicated id an ARIA attribute refers to.
  • duplicateCount: how many elements in the document carry that id.

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
<span id="lbl">Name</span>
<input type="text" aria-labelledby="lbl">

The id lbl is unique, so the reference resolves unambiguously.

can't tell
<span id="lbl">Name</span>
<span id="lbl">Duplicate</span>
<input type="text" aria-labelledby="lbl">

aria-labelledby="lbl" resolves to the first element with that id — whether that's the intended target is an authoring question the markup can't answer.

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_ARIA_REFERENCED

  1. Inspect the element the report names and note the ARIA attribute and the duplicated id it refers to.
  2. In the developer tools, search the markup for id="the-id" and note each element that has it and its text; the browser uses the first one.
  3. Open the Accessibility pane in the browser's developer tools on the referring element and read the name or description it gets.
  4. Compare that with the text next to the element on screen (for example, its own card's title).

Pass. The name or description comes from the intended element, or all the duplicates have the same text.

Fail. The referring element gets text from the wrong element, such as card 2 named with card 1's title, which fails WCAG 4.1.2 (and 1.3.1).

View source