Geef duidelijke instructies bij invoervelden

Zorg dat alle velden in een formulier voorzien zijn van een instructie, en zorg dat deze instructies duidelijk zijn voor de bezoeker.

Hoe pas ik dit toe?

De bruikbaarheid van formulieren staat of valt bij de instructies die per invoerveld gegeven worden. Een toegankelijke instructie is inhoudelijk helder en correct, en technisch op de juiste wijze in het formulier geplaatst.

Een heldere en correcte instructie

Het is prettig als je een digitaal formulier direct goed kunt invullen. Voor bezoekers met een beperking is dit vaak nog belangrijker, omdat het corrigeren van fouten hen veel tijd kan kosten. Om die reden moeten instructies duidelijk beschrijven wat 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 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 en een ‘zoek’-knop, maar geen instructie in een <label>-element. In deze situaties moet de instructie niet in het <label>-element worden toegevoegd, maar in het title-attribuut van het invoerveld.

Voorbeelden

Een duidelijke 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" />

In de gevallen waarbij 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" />

Hoe draagt dit bij aan een betere website?

Door duidelijke en correct geplaatste instructies te gebruiken maak je een formulier niet alleen toegankelijk, maar ook gebruiksvriendelijker. Een toegankelijk formulier kan ook door bezoekers met een beperking goed worden gebruikt. Door duidelijke instructies te geven maak je het bovendien gemakkelijker voor alle bezoekers om te begrijpen welke invoer wordt verwacht. <label>-elementen in HTML koppelen aan formuliervelden heeft als extra voordeel dat je het invoerveld kunt selecteren door op de instructie te klikken.

Bouwer of redacteur?

De bouwer is verantwoordelijk voor het technisch correct plaatsen van <label>-elementen voor de instructies bij formuliervelden. De redacteur moet zorgen dat de instructies zelf helder en correct zijn.

Technische details

Hoort bij