axe-core "duplicate-id" id attribute is not unique in CI

By Daniel Zoghalchali·Latchkey

axe-core rule duplicate-id (and duplicate-id-active/duplicate-id-aria) found the same id on more than one element. Duplicate ids break for/id label links and aria-* references that must resolve to a single node.

What this error means

axe reports "duplicate-id: id attribute value must be unique" and lists the id that appears more than once, often from a repeated component or a list rendered without unique keys.

duplicate-id: id attribute value must be unique (minor)
  Fix any of the following:
    Document has multiple static elements with the same id attribute: submit-btn
  <button id="submit-btn">Save</button>

Common causes

A repeated component hardcodes the same id

A component with a fixed id rendered more than once (in a list or on repeated forms) produces duplicate ids.

Two independent elements collide on one id

Separate parts of the page happen to use the same id string, so references become ambiguous.

How to fix it

Generate unique ids per instance

1. Replace hardcoded ids in reusable components with generated ones.
2. Use a stable unique id per instance (React useId) so labels and ARIA references resolve.
3. Re-run axe to confirm each id is unique.

const id = useId();
<label htmlFor={id}>Email</label>
<input id={id} type="text" />

Remove accidental id collisions

Where two unrelated elements share an id, rename one so every id in the document is unique.

How to prevent it

• Use useId or a similar generator for ids in reusable components.
• Avoid hardcoded ids on elements rendered in lists.
• Run axe to catch collisions before they break label associations.

Frequently asked questions

Related guides

References

• GitHub Actions documentation