Skip to content
Learn Measure Blog Case studies About
On this page
  • How Lighthouse identifies ARIA elements that refer to duplicate IDs
  • How to fix duplicate IDs
  • Resources

ARIA IDs are not unique

Oct 17, 2019
Appears in: Accessibility audits
On this page
  • How Lighthouse identifies ARIA elements that refer to duplicate IDs
  • How to fix duplicate IDs
  • Resources

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 #

  • Source code for ARIA IDs are not all unique audit
  • IDs used in ARIA and labels must be unique (Deque University)
Last updated: Oct 17, 2019 — Improve article
Return to all articles
Share
subscribe

Contribute

  • File a bug
  • View source

Related content

  • developer.chrome.com
  • Chrome updates
  • Web Fundamentals
  • Case studies
  • Podcasts
  • Shows

Connect

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • All products
  • Terms & Privacy
  • Community Guidelines

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.