Terug naar Artikelen

Toegankelijke formulieren

Toegankelijke formulieren maken volgens EN 301 549 (Voorheen Webrichtlijnen versie 2).

Inleiding

In dit artikel worden handvatten geboden voor het maken van toegankelijke formulieren. Een toegankelijk formulier is door alle bezoekers van je website te gebruiken, inclusief bezoekers die niet of minder goed kunnen zien of een cognitieve beperking hebben.

Bij het maken van toegankelijke formulieren moet je op het volgende letten:

  • Namen voor invoervelden en knoppen
  • Groeperen van invoervelden
  • Instructies en Foutmeldingen
  • Voorbereiding en voorspelbaarheid

Namen voor invoervelden en knoppen

Om naar bezoekers duidelijk te maken wat de naam is van een invoerveld, dient een zichtbaar tekstlabel geboden te worden. De meeste bezoekers zien dan direct wat in het veld moet worden ingevuld. Voor blinde bezoekers is dit lastiger. Daarom dient het tekstlabel ook nog expliciet geassocieerd te worden met het invoerveld. Dat zorgt ervoor dat het tekstlabel aan blinde bezoekers kan worden voorgelezen, wanneer zij in het invoerveld staan. Zoals in het volgende voorbeeld:


Tip: de snelste methode om te zien of een tekstlabel correct is geassocieerd met een invoerveld, is door met de muis op het label te klikken. Bij correcte associatie, komt de cursor dan direct in het invoerveld te staan.

Expliciete associatie

Expliciete associatie gebeurt als volgt: plaats het tekstlabel binnen een label element en zorg ervoor dat de waarde in het for attribuut gelijk is aan de id van het invoerveld. Het label "achternaam" is geassocieerd met het tekstveld wat er na komt. In HTML-code ziet dit er als volgt uit.

<form action="#"> 
<label for="achternaam">Achternaam: </label>
<input id="achternaam" type="text" /> 
<label for="email">E-mailadres: </label>
<input id="email" type="text" /> </form>

De volgende invoervelden hebben een expliciet geassocieerd label nodig: 

  • input type="text"

  • input type="checkbox"

  • input type="radio"

  • input type="file"

  • input type="password"

  • textarea

  • select

Indien in plaats van label elementen, gebruik wordt gemaakt van bijvoorbeeld td, span of div elementen, is het voor blinde bezoekers niet duidelijk wat in een invoerveld moet worden ingevuld.

Title in plaats van tekstlabel

Namen zijn voor elk invoerveld verplicht. Soms is echter geen ruimte beschikbaar voor een zichtbaar tekstlabel. Bijvoorbeeld bij een zoekveld bovenaan de pagina. In zo'n geval mag in plaats van een label element, ook een title attribuut worden toegevoegd aan het invoerveld. Dit title attribuut kan dan aan blinde bezoekers worden voorgelezen als de naam van het invoerveld. Zoals in het volgende voorbeeld:

<form action="#">
<input type="text" id="zoekveld" title="Voer uw zoekterm in">
<input type="submit" value="Zoeken">
</form>

Als het title attribuut wordt gebruikt, dient altijd voor ziende bezoekers duidelijk te zijn wat moet worden ingevuld. Bijvoorbeeld doordat een 'Zoeken'-knop achter het invoerveld staat of doordat 'Datum:' voor 3 select-invoervelden staat. Een ziende bezoeker kan er dan vanuit gaan dat respectievelijk dag, maand, jaar wordt verwacht.

Let op: gebruik voor 1 invoerveld nooit zowel een geassocieerd label element als een title attribuut (als aanvulling op elkaar). Voorleessoftware voor blinde bezoekers zal dan namelijk slechts 1 van beiden voorlezen als de naam van het invoerveld.

Een naam bieden aan knoppen

Niet alle onderdelen van een formulier krijgen een naam via expliciete associatie van een label of een title attribuut. Met het value-attribuut geef je een naam aan Submit, Reset en Button (input type="button") knoppen, het alt attribuut geeft een naam aan image buttons en bij button elementen wordt de naam tussen de <button> tags geboden. Het label element wordt dus niet gebruikt bij de volgende formulierknoppen:

  • Submit, Reset en Button knoppen (input type="submit", input type="reset" of input type="button")

  • Image buttons (input type="image")

  • Button elementen  (<button>)

Reset knop

Het is beter om geen reset knop te gebruiken bij een formulier. Het per ongeluk activeren van een reset knop kan namelijk als consequentie hebben dat de gebruiker al haar ingevulde gegevens verliest. De enige situatie waarin een reset knop wel toegestaan is, is als het formulier vooringevulde gegevens heeft. De reset knop moet dan wel aan de volgende eisen voldoen:

  • het moet een een tekstlabel (via het value) attribuut hebben waaruit de functie duidelijk blijkt;
  • het moet door middel van de presentatie waarneembaar te onderscheiden zijn van de submit knop.

Groeperen van invoervelden

Als je een verzameling invoervelden wilt groeperen, doe je dit met het fieldset element. Deze groepering heeft ook een naam nodig: het legend element dat als eerstvolgende element geplaatst wordt binnen de fieldset. Als een blinde bezoeker op een invoerveld staat, kan dan naast het bijbehorende label, ook het legend element van die groep worden voorgelezen. Een voorbeeld:

<form action="#">
<fieldset>
<legend>Adresgegevens</legend>
<label for="vraag1">Straat</label>
<input type="text" id="vraag1">
<label for="vraag2">Postcode</label>
<input type="text" id="vraag2">
<label for="vraag3">Woonplaats</label>
<input type="text" id="vraag3">
<input type="submit" value="verzenden">
</fieldset>
</form>

Indien de labels van losse invoervelden op zichzelf niet voldoende informatie geven, zijn een fieldset en legend noodzakelijk. Bijvoorbeeld bij ja/nee radiobuttons: voor een blinde bezoeker biedt 'Ja' of 'Nee' onvoldoende informatie en dient ook de vraag voorgelezen te kunnen worden door hun voorleessoftware. Dit wordt bereikt, door de radiobuttons te groeperen met een fieldset element en de vraag in het legend element te plaatsen:

<form action="#">
<fieldset>
<legend>Wilt u onze nieuwsbrief ontvangen?</legend>
<label for="ja">Ja, graag</label>
<input type="radio" id="ja">
<label for="nee">Nee, bedankt</label>
<input type="radio" id="nee">
<input type="submit" value="verzenden">
</fieldset>
</form>

Het is overigens toegestaan om een fieldset element binnen een ander fieldset element te plaatsen. Een groepje bij elkaar horende invoervelden kan immers onderdeel zijn van een grotere groep.

Instructies en Foutmeldingen

Voor het optimaal kunnen gebruiken van een formulier zijn duidelijke instructies nodig. Bijvoorbeeld het aangeven van verplichte velden of instructies over de notatie die gebruikt moet worden bij het invullen (bijvoorbeeld bij de invoer van een datum). Daarnaast is het belangrijk om, als er iets niet óf verkeerd is ingevuld een duidelijke foutmelding te geven. De foutmelding moet het probleem goed omschrijven en duidelijk verwijzen naar het invoerveld waar de fout is gemaakt.Op die manier kan de fout eenvoudig hersteld worden.

Verplichte velden

Het aangeven van verplichte velden kan op verschillende manieren. Als gebruik gemaakt wordt van het asteriks (*) teken bij formuliervelden, moet de uitleg van dit teken voorafgaand aan het eerste invoerveld gegeven worden. Op deze manier is voor het invullen van het formulier al duidelijk dat er verplichte velden zijn en ook hoe ze te herkennen zijn. Andere manieren om verplichte velden aan te geven zijn door middel van tekst (bijv. "verplicht") of door middel van een afbeelding (met een tekstueel alternatief).

Welke manier ook gebruikt wordt om een verplicht veld aan te duiden, het is belangrijk om de aanduiding bij het invoerveld binnen het tekstlabel te plaatsen, of, indien geen tekstlabel mogelijk is, binnen het title attribuut van het invoerveld. Op die manier is de melding van het verplicht zijn ook door middel van expliciete associatie direct gekoppeld aan het invoerveld. Mensen die visueel beperkt zijn krijgen deze informatie dan ook direct als de focus op het invoerveld staat. Zie bijvoorbeeld:

<h1>Registratie formulier</h1>
<p>Velden waar een * bij staat zijn verplicht</p>
<form action="#">
<label for="voornaam">Voornaam: *</label>
<input type="text" id="voornaam"> <br />
<label for="achternaam">Achternaam: *</label>
<input type="text" id="achternaam"><br />
<label for="email">E-mail adres:</label>
<input type="text" id="email"><br />
<input type="submit" value="Registreer">
</form>

Als je een foutmelding geeft wanneer een verplicht veld niet is ingevuld, let er dan op dat de tekst van de foutmelding duidelijk verwijst naar het veld waarop het van toepassing is (gebruik niet: "een verplicht veld is niet ingevuld"). Als je kleur gebruikt om aan te geven welk veld niet is ingevuld, let er dan op dat kleur niet de enige manier is waarmee je dit aangeeft, maar altijd aanvullend op een tekstuele melding. Een foutmelding moet dus altijd minimaal in zichtbare tekst weergegeven worden.

Verplicht invoerformaat

Net als de verplichte velden, kunnen er ook verplichte invoerformaten zijn. Bijvoorbeeld een e-mailadres wat de vorm naam@domein.nl moet hebben. Het is belangrijk om vóór het invoerveld duidelijk te maken wat de eisen zijn aan de invoer, óf automatisch de invoer te corrigeren. Bijvoorbeeld: Postcode (1234 AB). Het beste is om de instructie binnen het label element te plaatsen zodat de instructie, als de bezoeker op het invoerveld staat, wordt voorgelezen.

Er wordt ook wel eens gebruik gemaakt van een placeholder tekst die al in het invoerveld vooringevuld staat en verdwijnt op het moment dat de focus er op komt. Dit is echter nooit een afdoende vervanging voor een duidelijk tekstlabel en duidelijke instructies.

Eventuele foutmeldingen moeten duidelijk verwijzen naar het veld waarop het van toepassing is. Let op: als je kleur gebruikt om aan te geven welk veld niet correct is ingevuld, zorg er dan voor dat kleur niet de enige manier is waarmee je dit aangeeft.
Voorbeeld foutmelding: Het e-mailadres is niet correct ingevuld

Voorbereiding en voorspelbaarheid

Bied voldoende ondersteuning

Het is belangrijk gebruikers voldoende ondersteuning en informatie te bieden bij het invullen van een formulier. Zowel vóór het formulier ingevuld wordt als tijdens of na het invullen van het formulier. Op die manier komt een bezoeker van je website niet voor verrassingen te staan tijdens het invullen van het formulier. Hierbij moet je denken aan:

  • Vooraf informatie geven over de verwerking van ingevulde persoonsgegevens (indien van toepassing);
  • Een mogelijkheid bieden om tijdens of na het invullen de ingevulde gegevens op te slaan of een kopie van de gegevens per e-mail te ontvangen;
  • Als een formulier uit meerdere stappen bestaat:
    • Vooraf informatie bieden over de omvang van het formulier. Bijvoorbeeld door aan te geven uit hoeveel stappen het formulier bestaat en/of door een schatting te geven van de benodigde tijd en/of de hoeveelheid vragen/velden;
    • Vooraf informatie geven welke documenten nodig zijn bij het invullen van het formulier;
    • Duidelijk aangeven bij welke stap de gebruiker is tijdens het invullen.

Tijdslimiet

Veel gebruikers met functiebeperkingen hebben meer tijd nodig om taken af te maken dan de meeste gebruikers; het kan langer duren voordat zij fysiek reageren, het kost hun mogelijk meer tijd om te lezen, als ze beperkt zicht hebben, kan het bij hen langer duren om dingen te vinden of te lezen, of ze krijgen toegang tot content door middel van een hulptechnologie die meer tijd vergt. Daarom is het belangrijk dat een bezoeker alle tijd en rust heeft om een formulier in te vullen.

Als een bezoeker beperkt de tijd heeft om iets te lezen of te doen binnen het formulier dan dient de mogelijkheid te worden gegeven om de tijdslimiet uit te zetten, aan te passen (tot tenminste tien keer de standaard tijdsperiode) of door middel van een eenvoudige handeling binnen 20 seconden te verlengen (minstens tien keer).

Er zijn ook situaties denkbaar waarin het niet mogelijk of niet wenselijk is om de tijdslimiet uit te zetten of te verlengen. In de volgende situaties is het niet nodig om de bezoeker de mogelijkheid te bieden om de tijdslimiet uit te zetten of te verlengen:

  • De tijdslimiet is onderdeel van een realtime gebeurtenis (een veiling bijvoorbeeld) en er is geen alternatief voor de tijdslimiet mogelijk;
  • De tijdslimiet is essentieel en verlenging zou de activiteit ongeldig maken;
  • De tijdslimiet is langer dan 20 uur.

Contextwijziging

Binnen het formulier mogen geen grote wijzigingen plaatsvinden wanneer onderdelen van het formulier focus krijgen (dus wanneer er nog niet op wordt geklikt). Daarnaast mogen er ook geen grote wijzigingen plaatsvinden wanneer er iets ingevoerd of veranderd wordt in het formulier.

Voorbeelden van grote wijzigingen zijn onder andere de pagina die ververst wordt, een nieuw venster dat wordt geopend of een zodanige verandering aan de pagina, dat deze een andere betekenis heeft gekregen.

Leer meer over WCAG 2.0 en Webrichtlijnen 2

Meer leren over de WCAG 2.0 en Webrichtlijnen 2.0 (WCAG 2.0 + extra kwaliteitsrichtlijnen)? Dat kan! Onze trainingen met praktijkvoorbeelden leren je meer over deze nieuwe toegankelijkheidsrichtlijnen en bieden ruimte voor je eigen vragen:

We geven ook trainingen, speciaal voor redacteuren:

Bekijk onze trainingen pagina voor een overzicht van al onze trainingen.

Tags:
Categorie:
Kennisbank
  • Delen op Facebook
  • Delen op Twitter
  • Delen op LinkedIn