Campus Design System

Appearance

3.3.2 Labels of instructies niveau A ​

Uitleg ​

Het WCAG-criterium 3.3.2 Labels of Instructies vereist dat formuliervelden, interactie-elementen of andere invoerelementen duidelijk gelabeld zijn of dat er instructies worden gegeven voor het gebruik van deze elementen. Dit is belangrijk voor de toegankelijkheid van een website of applicatie, omdat het gebruikers helpt begrijpen wat van hen wordt verwacht bij het invullen van formulieren of interactie met andere invulbare velden. Dit geldt voor alle vormen van invoer, zoals tekstvelden, keuzelijsten, radioknoppen en knoppen.

Gebruikers moeten begrijpen wat voor informatie ze moeten invoeren, waarom die informatie nodig is en in welk formaat het verwacht wordt. Voor gebruikers van assistieve technologieën, zoals screenreaders, zijn duidelijke labels en instructies essentieel om de gebruiker door het proces te begeleiden en misverstanden of verwarring te voorkomen.

Wat betekent dit in de praktijk? ​

Als je een formulier maakt, moeten alle invoervelden of knoppen voorzien zijn van duidelijke labels die beschrijven wat de gebruiker moet invoeren. Als een veld specifieke eisen heeft (bijvoorbeeld een bepaald formaat voor een telefoonnummer), moeten er instructies worden gegeven die de gebruiker duidelijk maken wat er van hen wordt verwacht.

Bijvoorbeeld, in een formulier waar een gebruiker een e-mailadres moet invoeren, moet het veld duidelijk gelabeld zijn als "E-mailadres", en als er een specifiek formaat vereist is, moet dit ook worden vermeld.

Voorbeeld van het probleem ​

Stel je voor dat je een formulier hebt met een tekstveld voor het invoeren van een telefoonnummer, maar er is geen label dat uitlegt welk formaat het nummer moet hebben (bijvoorbeeld: (123) 456-7890). Gebruikers kunnen verwarring ervaren over hoe het nummer ingevoerd moet worden, wat leidt tot fouten bij het invullen van het formulier.

html
<!-- Invoer zonder label of instructies -->
<input type="text" id="phone" />

In dit geval is er geen label of uitleg die de gebruiker vertelt wat er van hen wordt verwacht bij het invullen van het veld.

Oplossing voor dit probleem ​

Elk formulier- of invoerveld moet een duidelijk label hebben. Bij velden waar een specifiek formaat nodig is, zoals een telefoonnummer of postcode, moeten ook instructies worden gegeven over hoe het formaat eruit moet zien.

html
<!-- Invoer met label en instructie -->
<label for="phone">Telefoonnummer:</label>
<input type="text" id="phone" name="phone" />
<p class="instruction">Vul het nummer in het formaat (123) 456-7890 in.</p>

In dit geval helpt het label de gebruiker te begrijpen wat er van hen wordt verwacht, en de instructies verduidelijken het specifieke formaat voor het telefoonnummer.

Belangrijke overwegingen ​

  • Labeling: Elk invoerveld moet een label hebben dat duidelijk beschrijft wat van de gebruiker wordt verwacht. Het label moet visueel zichtbaar zijn en, als de gebruiker een assistieve technologie gebruikt, toegankelijk via het for-attribuut van het label dat overeenkomt met de id van het invoerveld.

  • Instructies voor specifieke eisen: Als een veld specifieke invoer vereist (bijvoorbeeld een e-mailadres of telefoonnummer), moeten de instructies duidelijk worden gepresenteerd naast het invoerveld.

  • Visuele en programmaticale consistentie: Het label moet zowel visueel als in de HTML-code aanwezig zijn, zodat gebruikers die screenreaders gebruiken of andere assistieve technologieën de labels kunnen horen.

Voorbeeld van toepassing ​

Stel dat je een formulier hebt waarin een gebruiker hun geboortedatum moet invoeren. De instructie moet aangeven in welk formaat de gebruiker de datum moet invoeren.

html
<label for="dob">Geboortedatum:</label>
<input type="text" id="dob" name="dob" />
<p class="instruction">Vul de geboortedatum in het formaat dd/mm/jjjj in.</p>

Op deze manier wordt de gebruiker duidelijk geïnformeerd over wat er van hen wordt verwacht, en wordt de kans op fouten verminderd.

Testen en hulpmiddelen ​

  • WAVE Accessibility Tool: Gebruik WAVE om te controleren of alle invoervelden goed gelabeld zijn en of instructies aanwezig zijn wanneer dat nodig is. WAVE Tool.
  • Axe Accessibility Tool: Axe kan helpen bij het testen van de aanwezigheid van labels en instructies voor formulierinvoer. Axe Tool.

Referenties ​