Gebruik duidelijke labelteksten
Het doel van een label is dat de gebruiker de vraag begrijpt. Een effectief label is duidelijk en beschrijvend. Waar nodig wordt er ook extra hulp geboden worden, zoals een omschrijving van waar een BSN-nummer te vinden is.
Wanneer je een afkorting gebruikt, of je moet jargon gebruiken omdat de officiële term verplicht is, geef dan in de beschrijving een voorbeeld of uitleg.
Doen
Simpel label met extra beschrijving. Gebruik waar nodig een losse description om meer uitleg te geven.
Vul de voornaam of voornamen in zoals deze op je id-kaart of paspoort staan.
<label for="first-name">Voornaam (een of meerdere)</label><p id="first-name-description">Vul de voornaam of voornamen in zoals deze op je id-kaart of paspoort staan.</p><input autoComplete="given-name" type="text" name="first_name" id="first-name" aria-describedby="first-name-description"/>
Niet doen
Ingewikkeld label. Door veel informatie in te korten wordt het label onduidelijk
<label for="first-name2">Voornaam(en)</label><input autoComplete="given-name" type="text" name="first_name" id="first-name2"/>
Meer lezen over gerelateerde WCAG-succescriteria op NL Design System
Op de WCAG succescriteria pagina's op deze website lees je meer over veelgemaakte fouten en hoe je kunt testen of jouw website aan de succescriteria voldoet.
Over deze richtlijnen
Deze richtlijnen worden onderhouden door 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? Open een issue op GitHub en deel je mening.