--- title: "Duplicate id referenced by ARIA (a11y/duplicate-id-aria)" description: "a11y/duplicate-id-aria: When several elements share an id, aria-labelledby, aria-describedby and aria-controls resolve to the first match only, so controls…" canonical: https://void-design.vercel.app/rules/a11y/duplicate-id-aria lastModified: 2026-09-16 --- # Duplicate id referenced by ARIA `a11y/duplicate-id-aria` · severity **error** · category Accessibility · detected by `void a11y` and `void audit` ## Why it matters When several elements share an id, aria-labelledby, aria-describedby and aria-controls resolve to the first match only, so controls get the wrong label. ## How to fix it Make every id referenced by an ARIA attribute unique on the page. Generate ids per component instance (React useId). ## References - https://dequeuniversity.com/rules/axe/4.13/duplicate-id-aria ## More accessibility rules `void a11y` reports 48 rules in this category. WCAG 2.2 AA through axe-core, plus checks axe can't do alone: visible keyboard focus, 24/44px target size on mobile, 320px reflow and disabled zoom. - `aria-input-field-name` ARIA input field has no accessible name — [a11y/aria-input-field-name](https://void-design.vercel.app/rules/a11y/aria-input-field-name) - `aria-toggle-field-name` ARIA toggle has no accessible name — [a11y/aria-toggle-field-name](https://void-design.vercel.app/rules/a11y/aria-toggle-field-name) - `aria-prohibited-attr` ARIA attribute is prohibited for this role — [a11y/aria-prohibited-attr](https://void-design.vercel.app/rules/a11y/aria-prohibited-attr) - `nested-interactive` Interactive controls are nested — [a11y/nested-interactive](https://void-design.vercel.app/rules/a11y/nested-interactive) - `frame-title`