Zorg ervoor dat alle velden op een formulier vergezeld gaan van een duidelijke en correct geplaatste instructie. Hierdoor hebben alle bezoekers een formulier dat zowel toegankelijk als gebruiksvriendelijker is, gemakkelijk te gebruiken door mensen met een handicap.
Een duidelijke vorm helpt alle bezoekers precies te begrijpen wat ze moeten doen.
- Het voordeel van het associëren van <label>-elementen in HTML met formuliervelden is dat je het invoerveld kunt selecteren door te klikken op de instructie
Hoe pas je dit toe?
Plaats de instructies naast elk invoerveld. Ze moeten duidelijk en correct zijn qua inhoud en op de juiste wijze in de vorm worden geplaatst om volledig toegankelijk te zijn.
Een heldere en correcte instructie
Het is wel zo aangenaam wanneer je een webformulier van de eerste keer correct kunt invullen. Voor bezoekers met een beperking is dit vaak nog belangrijker, omdat het corrigeren van fouten hen veel tijd kan kosten. Daarom moeten instructies duidelijk beschrijven wat er in het invoerveld moet worden ingevuld en of het veld verplicht is. Als het kan moet ook worden aangegeven aan welke eisen de invoer moet voldoen. Zo moet een telefoonnummer bijvoorbeeld uit 9 cijfers en een gsm-nummer uit 10 cijfers bestaan.
De juiste HTML-structuur
Instructies bij invoervelden moeten met behulp van het <label>-element van HTML in een formulier worden geplaatst. Als dit op de juiste wijze is gedaan, kunnen ze door hulptechnologie gekoppeld worden aan de bijbehorende invoervelden. Ook bezoekers die het formulier niet kunnen (over)zien weten zo wat in welk invoerveld moet worden ingevuld. Schermlezers lezen dan bijvoorbeeld de instructie voor op het moment dat het invoerveld geselecteerd wordt.
In sommige gevallen is het niet mogelijk om een instructie bij een veld te tonen, bijvoorbeeld omdat dit niet past in het ontwerp van de site. Dit is vaak het geval bij een zoekveld op de website. Er is dan een invoerveld met een zoekknop, maar geen instructies in een <label>-element maar in het titelattribuut van het invoerveld.
Voorbeelden
Een duidelijk instructie beschrijft exact wat ingevuld moet worden in een veld.
- Duidelijk = ‘Uw achternaam’
- Minder duidelijk = ‘Naam’
In de HTML-code ziet een juist geplaatste instructie er als volgt uit. Met het for-attribuut van het <label> element wordt dit element gekoppeld aan het invoerveld (in dit geval het <input>-element) met id ‘achternaam’.
<label for="achternaam">Achternaam</label>
<input type="text" id="achternaam" />
Wanneer er geen plaats is voor een <label> element moet het title-attribuut worden gebruikt om de instructie te geven:
<input type="text" title="Typ uw zoekterm" />
<input type="submit" value="Zoeken" />
Label: tekst die niet kan worden gewijzigd - instructie
- voorbeeld: voer jouw naam in, plaats over een invoerveld
Titel: tekst die verdwijnt en die in het zoekveld staat
- voorbeeld: typ jouw zoekopdracht in
Attribuut: opdracht voor de computer
Voor redacteurs
De redacteur moet zorgen dat de instructies zelf helder en correct zijn.
Voor ontwikkelaars
De ontwikkelaar is verantwoordelijk voor de technisch correcte plaatsing van <label> elementen voor formulierveldinstructies.