De zichtbare naam moet overeenkomen met de toegankelijke naam

Gebruikers van voice recognition software kunnen een formulierveld focus geven door de naam uit te spreken.

Als de toegankelijke naam niet begint met de zichtbare naam werkt dit niet goed. Dit kan gebeuren bij het verkeerd gebruik van het attribute aria-label. Met aria-label kan een formulierveld ook een toegankelijke naam worden gegeven, onzichtbaar voor de ziende gebruiker.

Zorgen dat de zichtbare naam en toegankelijke naam overeenkomen, is nodig om te voldoen WCAG-succescriterium 2.5.3: Label in naam (niveau A).

Doen

Het zichtbare label is de toegankelijke naam.

Hoe heet je hond

<label for="hond">Hoe heet je hond</label><input type="text" id="hond" name="hond"/>

Niet doen

Alleen een placeholder gebruiken om te laten zien wat de gebruiker moet invullen,

terwijl de onzichtbare toegankelijke naam een hele andere inhoud heeft.

<input type="text" name="lievelingskleur" aria-label="Vul een kleur in" placeholder="Wat is je lievelingskleur"/>

Niet doen

Alleen losse tekst gebruiken om te laten zien wat de gebruiker moet invullen,

terwijl de onzichtbare toegankelijke naam een hele andere inhoud heeft.

Zoek

<div>Zoek</div><input type="search" name="trefwoord" aria-label="Trefwoord"/>

Over deze richtlijnen

Deze richtlijnen worden onderhouden door het NL Design System en zijn op dit moment in beta.

We willen graag van de community horen of ze werkbaar en nuttig zijn. Heb je vragen, aanvullingen of opmerkingen? Deel je mening op GitHub met je suggesties.