Duplicated [id] Attributes on Active and Focusable Elements

Google Lighthouse performs the flagging of elements that have duplicate IDs

Determinin whether an element is focusable or not: If the user can navigate it using the Tab key, this element is functional. Generally, the list of elements that are focusable for different browsers may vary. However, we will provide you with a general list.

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

How to pass the duplicate ID audit?

To pass the duplicate ID audit you need to replace at least one of the elements using the same ID. Check out the example below: