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.
How the Lighthouse duplicate ID audit fails #
Lighthouse flags duplicate IDs found in a page:
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:
<input type="radio" id="huey" name="newphews" value="Huey" checked>
<input type="radio" id="huey" name="newphews" value="Dewey" checked>
<input type="radio" id="louie" name="newphews" value="Louie" checked>
- Source code for
[id]attributes on the page are not unique audit
- ID attribute values must be unique (Deque University)