Learn Measure Blog About

[id] attributes on active, focusable elements 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 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:

Lighthouse audit showing focusable elements with 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:

  • <a>
  • <area>
  • <audio controls>
  • <button>
  • <iframe>
  • <input>
  • <select>
  • <summary>
  • <textarea>
  • <video controls>
  • Any element with the contentEditable attribute
  • Any element with a tabindex set to a numeric value other than -1

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>

Resources

Last updated: Improve article