How to Fix Duplicate ID Attributes WCAG 2.2

Why this matters

When aria-labelledby points to an id that appears twice, the browser picks one unpredictably. This means labels may connect to the wrong element or not work at all for screen reader users. Duplicate IDs also break JavaScript that uses getElementById.

Code examples

<!-- Two elements with the same id -->
<label id="name-label">Full name</label>
<input aria-labelledby="name-label">

<label id="name-label">Company name</label>
<input aria-labelledby="name-label">

<!-- Unique ids for each element -->
<label id="full-name-label">Full name</label>
<input aria-labelledby="full-name-label">

<label id="company-name-label">Company name</label>
<input aria-labelledby="company-name-label">

How to fix it — step by step

1. 1
   Audit your page with browser DevTools — search the DOM for repeated id values
2. 2
   Use WebPossum to automatically detect all duplicate IDs on any page
3. 3
   When copying and pasting HTML components, always change the id values
4. 4
   In WordPress, check that widget areas and repeated components don't share IDs
5. 5
   For dynamically generated content, append a unique number to IDs (e.g. field-1, field-2)
6. 6
   Remember: class attributes can repeat, id attributes cannot

Test it for free

Use WebPossum to automatically detect this violation and every other WCAG 2.2 issue on your site. Free, instant, no signup required.