a11y/aria-ref-exists

Dlaczego

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.

Poprawka

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.

Przykłady

<!-- 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>

Źródła

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

Przeczytaj w terminalu

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