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
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-nameARIA input field has no accessible namearia-toggle-field-nameARIA toggle has no accessible namearia-prohibited-attrARIA attribute is prohibited for this rolenested-interactiveInteractive controls are nestedframe-title<iframe> has no titlesvg-img-altSVG image has no text alternativerole-img-altrole="img" element has no text alternativetabindexPositive tabindex