Sluit

Hoe maak ik labels bij invoervelden digitaal toegankelijk?

Main content

Als je label-elementen bij invoervelden in een webformulier op de goede manier gebruikt, maak je het formulier toegankelijker. Je helpt bezoekers van je website te begrijpen welke informatie in welke invoervelden moet worden ingevuld. Met de volgende tips maak je labels digitaal toegankelijk.

Wat zijn de eisen vanuit WCAG?

  • Labels moeten altijd zichtbaar en leesbaar zijn. Ook bij inzoomen blijven de labels leesbaar.
  • Geef labels begrijpelijke tekst. Moet de gebruiker de gegevens in het invoerveld op een bepaalde manier invoeren, bijvoorbeeld een postcode met of zonder spatie? Vermeld dit in een label.
  • Gebruik je een sterretje om aan te geven dat het een verplicht veld is? Dan moet die afbeelding ook een tekstalternatief hebben.
  • Geef meerdere invoervelden die bij elkaar horen een groepslabel. Bijvoorbeeld bij een adres.
  • Groepeer radiobuttons of checkboxes en geef ze een groepslabel. Gebruik hiervoor bijvoorbeeld fieldset- en legend-elementen. Andere methoden zijn mogelijk.
  • Verbind labels met invoervelden. Gebruik hiervoor een "for" en "id"-constructie.
  • Gebruik je labels die niet zichtbaar zijn op het scherm? Gebruik dan geen display:none in je code. Hiermee verberg je deze labels voor hulpsoftware zoals een screenreader.
  • Labels mogen ook iconen zijn. Zorg dan voor voldoende contrast, dit is minimaal 3,0:1. Geef ze ook een tekstalternatief.
  • Gebruik geen placeholdertekst in plaats van een label. Dit is niet de juiste manier om het element een toegankelijke naam ("accessible name") te geven.
  • Zorg ervoor dat de zichtbare tekst op het label terugkomt in de toegankelijke naam van het invoerveld.

Wat zijn onze tips?

Er zijn situaties denkbaar wanneer de bovenstaande opsomming niet voldoende is .Voor meer informatie en specifieke situaties en uitzonderingen, lees WCAG-succescriteria onder het kopje Officiële documentatie.

Test het zelf

Controleer met de AXE webbrowser plug-in of je labels digitaal toegankelijk zijn. Gebruik de WAVE webbrowser plug-in om elk invoerveld en elk label te controleren.

Ook interessant

Officiële documentatie