ARIA IDs are not unique

Each ID in your HTML document must be unique. Using the same ID on more than one element may cause screen readers and other assistive technologies to only announce the first element with the shared ID, preventing users from accessing the later elements.

Avoiding duplicate IDs is particularly important when using the aria-labelledby attribute. aria-labelledby provides an accessible name for an element by pointing to a second element, using its ID. If more than one element shares that ID, assistive technologies will read the first instance, which may not be what you intended.

How Lighthouse identifies ARIA elements that refer to duplicate IDs #

Lighthouse flags elements that share an ID referred to by another element's aria-labelledby attribute:

This audit is similar to the [id] attributes on active, focusable elements are not unique audit but checks for duplicate IDs in a different set of elements.

How to fix duplicate IDs #

Change an ID value if it is used more than once.

For example, the following code sample includes two elements with the same ID. One ID should be changed:

<div role="tabpanel" aria-labelledby="tabpanel-label">
  <h2 id="tabpanel-label">
    Tab panel title
  </h2>
  <p id="tabpanel-label">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </p>
</div>

Resources #

• Source code for ARIA IDs are not all unique audit
• IDs used in ARIA and labels must be unique (Deque University)