Learn Measure Blog About

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:

Lighthouse audit showing ARIA elements with duplicate IDs

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.

The Lighthouse Accessibility score is a weighted average of all the accessibility audits. See the Lighthouse accessibility scoring post for more information.

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

Last updated: Improve article