a11y/aria-ref-exists

Why

A reference to a missing id is dropped without a warning, so the hint, the error or the label is never read. When two elements share the id, the first one wins and the user may hear the wrong text.

Fix

Correct the id or the reference, and make ids unique per page. In components, generate ids (useId() in React and Vue 3.5, $props.id() in Svelte 5) and pass them down instead of hard-coding them.

Examples

<!-- bad -->
<input id="email" aria-describedby="email-hint"><p id="emailhint">…</p>
<!-- good -->
<input id="email" aria-describedby="email-hint"><p id="email-hint">…</p>

Sources

• WCAG 2.2, Understanding SC 1.3.1 Info and Relationships
• W3C, Accessible Name and Description Computation 1.2

Read it in the terminal

npx github:dawidolko/frontend-skills explain a11y/aria-ref-exists