Veel formulieren op websites zijn niet digitaal toegankelijk. Dat is jammer, want een webformulier is vaak een belangrijke manier voor mensen om met een organisatie in contact te komen. Wat je als organisatie niet wilt is dat jouw bezoekers afhaken omdat ze hierin vastlopen.
In dit kennisbericht geven we 8 tips om ervoor te zorgen dat iedereen gebruik kan maken van de formulieren op je website.
1. Maak webformulieren toetsenbordtoegankelijk
Een webformulier moet niet alleen met een muis te gebruiken zijn, maar ook met een toetsenbord. Dit is nodig voor mensen die, bijvoorbeeld vanwege een lichamelijke beperking, geen muis kunnen gebruiken. Uitgangspunt is dat je met een toetsenbord alles moet kunnen doen wat iemand met een muis ook kan. Dus; ongehinderd navigeren, selecteren, de invoervelden invoeren en het formulier verzenden.
Tip: kijk eens naar de webformulieren van jouw organisatie om te zien of je deze met alleen het toetsenbord in kunt vullen. Om te navigeren in het webformulier gebruik je Tab en Shift+Tab. De tabtoets gebruik je om mee vooruit te gaan (dus om het volgende veld te selecteren) en met Shift + Tab ga je terug naar het vorige veld.
2. Geef aan welke velden verplicht zijn
Geef van te voren aan welke invoervelden verplicht zijn. Dit kun je bijvoorbeeld aangeven met een asterisk (*). Let er op dat je dit bovenaan het webformulier kort toelicht (de velden met een asterisk* zijn verplicht).
Dit doe je specifiek bovenaan het webformulier en niet onderaan. Op die manier krijgt iemand die voorleessoftware gebruikt deze informatie op het juiste moment. Namelijk vóórdat hij/zij het formulier laat voorlezen.
3. Laat zien welk element focus krijgt
Als een ziende toetsenbordgebruiker door een webformulier navigeert moet deze duidelijk kunnen zien welk element de focus krijgt. Oftewel; het moet zichtbaar zijn welk onderdeel van het webformulier geselecteerd is.
In de afbeelding hieronder zie je dat het invoerveld ‘e-mailadres’ geselecteerd is (dus focus krijgt). Dit is duidelijk gemaakt met een dikke zwarte rand om het invoerveld en de cursor die in het invoerveld knippert.
4. Geef invoervelden duidelijke namen
De labels die bij de invoervelden staan geven duidelijk weer wat er in het invoerveld moet worden ingevuld (e-mailadres, woonplaats, aantal deelnemers etc.)
Is een bepaald schrijfwijze vereist, dan kun je dit het beste direct bij het invoerveld aangeven. Dit is vaak het geval bij een datum (dd-mm-jjjj) of telefoonnummer (alleen cijfers).
5. Gebruik de juiste invoertypes
In de code achter het webformulier kun je een invoertype aan het invoerveld koppelen. Deze moet overeenkomen met de informatie die je aan de gebruiker vraagt. Vraag je de gebruiker om een geboortedatum, dan gebruik je het datumveld. Moet er een e-mailadres worden ingevuld, dan kies je voor het type e-mail.
6. Pas autocomplete toe bij persoonlijke gegevens
Zorg ervoor dat alle invoervelden waar gevraagd wordt om iemands persoonlijke gegevens, automatisch worden aangevuld met autocomplete. Dit maakt het invullen van formulieren eenvoudiger, vooral voor mensen met cognitieve– of motorische beperkingen.
Het gaat echt alleen om gegevens van de persoon die het formulier invult, dus bijvoorbeeld iemands naam, adresgegevens en e-mailadres. Als dit in het webformulier goed is ingesteld kunnen browsers en andere hulpsoftware deze invoervelden aanvullen op basis van eerder ingevulde gegevens.
Autocomplete-attribuut toepassen
Pas in de code het autocomplete-attribuut toe op alle velden waar om persoonlijke informatie wordt gevraagd. Gebruik daarvoor alleen de standaardwaarden zoals deze zijn beschreven door het W3C. In de tabel hieronder hebben we de belangrijkste op een rijtje gezet.
Veel voorkomende autocomplete waarden
| Waarde | Toepassing |
|---|---|
| name | volledige naam |
| given-name | voornaam |
| family-name | achternaam |
| street-address | straat en huisnummer |
| postal-code | postcode |
| address-level2 | woonplaats |
| e-mailadres | |
| tel-national | telefoonnummer zonder landcode (+31) |
| tel | telefoonnummer inclusief landcode (+31) |
| bday | volledige geboortedatum |
| bday-day | geboortedag |
| bday-month | geboortemaand |
| bday-year | geboortejaar |
| organization | organisatienaam |
| username | gebruikersnaam |
| current-password | wachtwoord |
7. Let op het contrast
Voor slechtziende en kleurenblinde gebruikers is het nodig dat alle teksten voldoende contrast hebben. Dit moet een contrastratio van minimaal 4,5:1 zijn, ook voor placeholderteksten en knoppen. Daarnaast geldt dat zij moeten kunnen zien waar zij hun gegevens kunnen invoeren. Dit betekent dat de randen van de invoervelden ook voldoende contrast moeten hebben. Hiervoor geldt een minimale contrastratio van 3,0:1. Er zijn diverse (gratis) tools waarmee je dit zelf kunt testen. Eén van deze tools is de Colour Contrast Analyser (CCA) van Tpgi.
8. Zorg voor duidelijke foutmeldingen
Als een gebruiker een veld verkeerd invult of vergeet in te vullen, geef dan feedback met een duidelijke foutmelding.
Waar moet een goede foutmelding aan voldoen?
Een foutmelding legt uit wat er fout is gegaan, waar de fout zit en hoe je het op kunt lossen.
- Geef een foutmelding, geen instructie. De melding ‘Vul uw woonplaats in’ is een voorbeeld van een instructie. Een foutmelding vertelt de gebruiker wát er fout is gegaan: ‘U heeft het veld woonplaats niet ingevuld’ is in dit geval beter.
- Laat weten in welk invulveld de fout zit. De melding ‘Dit is een verplicht veld’ zegt niks over de locatie. Bij de melding ‘U heeft het veld datum niet ingevuld’ weet de gebruiker dat het gaat om het veld waar om de datum wordt gevraagd.
- Als het nodig is kun je de gebruiker in de foutmelding een extra instructie geven over het oplossen van de fout. Dit kun je echter ondervangen door direct al een instructie te geven bij het invoerveld. Bijvoorbeeld over het gewenste format (zoals dd-mm-jjjj bij een datumveld).
Nog een paar aanvullingen:
- Gebruik niet alleen kleur om een boodschap weer te geven. Houd daarbij de kleurenblinde of slechtziende bezoeker in gedachte, die niet alle kleuren goed kan waarnemen.
- Laat een formulier niet automatisch verzenden, maar maak altijd gebruik van een verzendknop. Dit maakt het gebruik van je webformulier voorspelbaar voor alle gebruikers.
- Geef een gebruiker voldoende tijd om een formulier in te vullen. Houd er rekening mee dat sommige mensen vanwege hun beperking wat meer tijd nodig hebben om een taak af te ronden.
Het maken van een digitaal toegankelijk formulier vraagt soms om een technische oplossing. Zoek je een aanbieder om jou te helpen bij het maken van digitaal toegankelijke content? Kijk dan eens in onze database met digitaal toegankelijke aanbieders.