Unieke ID's voor ARIA-verwijzingen

Hoe zorg je ervoor dat ID’s waarnaar ARIA verwijst uniek zijn?

Elk ID op een pagina mag maar één keer voorkomen. Controleer bij het gebruik van ARIA-attributen die naar een ID verwijzen of het doel-ID uniek is:

<label id="email-label">E-mailadres</label>
<input type="email" aria-labelledby="email-label" />

<label id="phone-label">Telefoonnummer</label>
<input type="tel" aria-labelledby="phone-label" />

<input type="password" aria-describedby="password-hint" />
<p id="password-hint">Gebruik minimaal 8 tekens.</p>

Het volgende is ongeldig omdat twee elementen hetzelfde ID delen:

<label id="field-label">E-mailadres</label>
<input type="email" aria-labelledby="field-label" />

<label id="field-label">Telefoonnummer</label>
<input type="tel" aria-labelledby="field-label" />

In het bovenstaande voorbeeld verwijzen beide invoervelden naar field-label. Wanneer ID’s zijn gedupliceerd, is het browsergedrag onvoorspelbaar, waardoor het tweede invoerveld onjuist of helemaal niet wordt aangekondigd.

Waarom is dit belangrijk?

ARIA-attributen werken door te verwijzen naar ID’s op de pagina. Wanneer ID’s zijn gedupliceerd, is het browsergedrag onvoorspelbaar.