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 for focusable controls like buttons and checkboxes is particularly important to ensure that users can access all of your page's functionality.
How Lighthouse identifies focusable elements with duplicate IDs #
Lighthouse flags focusable elements that have duplicate IDs:
An element is focusable when keyboard users can navigate to it using the
Tab key. Focusability differs somewhat across browsers, but in general, the following elements are focusable:
- Any element with the
- Any element with a
tabindexset to a numeric value other than
For a complete breakdown of cross-browser focus behavior, see ally.js's Focusable Elements - Browser Compatibility Table.
This audit is similar to the ARIA IDs are not all 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:
<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>