Duplicate IDs referenced by ARIA or labels on Next.js
What this is
3 elements share an `id` that a label or ARIA attribute points to. Assistive technology picks the wrong element, so the wrong name is read.
Who it affects
- Screen reader users
Standards
How to fix it
- Give every element a unique `id` and update the `for`, `aria-labelledby`, `aria-describedby` or `aria-controls` that refer to it.
On Next.js
ARIA attributes live in your JSX; search the component, fix or delete the attribute. Prefer native elements over ARIA roles where possible.
Other platforms
Prompt for an AI coding tool
Scan your site with AccessibilityBrief and you get a ready-to-use prompt for this problem, with the exact elements on your pages filled in.
Check your own website
Paste a web address. The free scan checks one page and shows what it finds.
More fixes
Automated testing detects only a portion of WCAG issues. Manual testing is required to assess full conformance.