Iedereen heeft wel eens te maken gehad met formulieren. Vroeger waren die vooral op papier. Tegenwoordig zijn het steeds vaker digitale formulieren, omdat ze dienen voor de interactie tussen de gebruiker en een website. Of het nu gaat om communicatie op internet of het bestellen van een artikel, je komt ze overal tegen. Ook het zoeken op internet, bijvoorbeeld met Google, heeft hiermee te maken. Het invullen van deze formulieren is moeilijk voor mensen met lichamelijke of cognitieve beperkingen, evenals voor blinde en slechtziende mensen. Om iedereen de mogelijkheid te bieden deel te nemen aan het openbare leven, moeten deze formulieren toegankelijk worden ontworpen. Maar: hoe maak je eigenlijk toegankelijke formulierelementen?
Daarvoor bestaan verschillende technieken. Voordat je je echter in de technieken verdiept, is het belangrijk om de formulierelementen te kennen. Deze kunnen namelijk in verschillende typen worden onderverdeeld. Er zijn onder andere de volgende typen:
- invoervelden van één regel
- invoervelden met meerdere regels
- Selectielijsten
- Keuzerondjes
- Selectievakjes
- Knoppen voor Verzenden/Annuleren
Tekst op formuliervelden
Om formulieren toegankelijk te maken, moeten de verschillende besturingselementen van een label worden voorzien. Dankzij deze labels kunnen ondersteunende technologieën de functies van de besturingselementen herkennen en aan de gebruiker doorgeven. Het is belangrijk dat de labels eenduidig aan de besturingselementen zijn gekoppeld, omdat schermlezers anders geen verband kunnen leggen met de elementen. Dit heeft tot gevolg dat gebruikers moeite hebben om het formulier te begrijpen. Ze kunnen niet herkennen welke informatie in welke velden moet worden ingevuld. Daardoor kunnen ze het formulier niet correct invullen en maken ze vaak fouten. De labels zijn echter niet allemaal op dezelfde manier benoemd. Het is van cruciaal belang of ze voor iedereen zichtbaar moeten zijn of niet. In de programmeertaal HTML wordt daarom onderscheid gemaakt tussen het label-element en de aria-attributen. Het label-element wordt gebruikt voor invoervelden, keuzelijsten, keuzerondjes en selectievakjes en moet op de juiste manier worden geplaatst. Bij invoervelden en keuzelijsten staat het label vóór de besturingselementen. Bij keuzerondjes en selectievakjes worden ze daarentegen achter het besturingselement geplaatst. Om ervoor te zorgen dat de labels ook aan het bijbehorende element kunnen worden gekoppeld, moet nog het for-attribuut worden toegevoegd.
Het aria-attribuut wordt in HTML gebruikt voor knoppen. Knoppen kunnen bijvoorbeeld in een formulier het verzenden of annuleren aangeven. Door middel van aria-attributen worden de beschrijvingen van de betreffende elementen alleen herkenbaar voor ondersteunende technologieën. Ze kunnen daarom ook worden gebruikt voor invoervelden die alleen zichtbaar moeten zijn voor de schermlezer. Er zijn veel aria-attributen die worden gebruikt om de toegankelijkheid op het internet te verbeteren. Deze verschillen echter in aard en functie. Voor het labelen van een element wordt het zogenaamde aria-label gebruikt. Uiteraard is het ook mogelijk om hetzelfde label voor meerdere elementen te gebruiken. Dit wordt mogelijk gemaakt door een aria-labelledby.
Invoervelden met één of meerdere regels
Invoervelden behoren tot de meest gebruikte elementen in formulieren. Ze kunnen uit één of meerdere regels bestaan. Velden met één regel worden gebruikt voor korte vragen, bijvoorbeeld naar de naam van een persoon, een e-mailadres, een straat of een plaats.
Ze worden in HTML aangemaakt met de input-tag en het type-attribuut.
Daarnaast kunnen er nog andere attributen worden toegevoegd, die bijvoorbeeld de regellengte bepalen.
Velden met meerdere regels worden doorgaans gebruikt voor grotere tekstgedeelten, zoals tekstberichten. Deze worden dan met de textarea-tag aangemaakt. Ook hier kan de ontwikkelaar het aantal regels en de regellengte vastleggen. Om deze velden echter toegankelijk te maken voor mensen met een beperking, moet nog de label-tag worden toegevoegd. Het is echter niet mogelijk om een koppeling tussen het label en de elementen tot stand te brengen als deze niet eenduidig aan elkaar zijn toegewezen. Deze moeten dan via het for-attribuut en het id-attribuut aan elkaar worden gekoppeld. In het onderstaande HTML-voorbeeld worden eenvoudige labels in dergelijke invoervelden geïmplementeerd.
<label for=“vorname“>Ihr Vorname: </label>
<input type“text“ name=“vorname“ id=“vorname“ />
<br />
<label for=“nachricht“>Ihre Nachricht: </label>
<textarea name=“nachricht“ id=“nachricht“> </textarea>
Hier wordt eerst een invoerveld van één regel voor de voornaam aangemaakt met het type “text”. De tekst „Uw voornaam:“ wordt via het label-element voor iedereen zichtbaar gemaakt. Dit staat vóór het input-element, omdat het vóór het invoerveld wordt weergegeven. Via het for-attribuut in de label-tag en het id-attribuut in het input-element worden deze velden aan elkaar gekoppeld. Het is hierbij belangrijk dat beide inhoudselementen identiek zijn, omdat ze anders niet aan elkaar kunnen worden gekoppeld. Het name-attribuut dient daarbij als identificatie voor dit veld en is nodig voor de overdracht van de gegevens naar een serverpagina.
Vervolgens wordt met de tag „textarea“ een invoerveld met meerdere regels aangemaakt. Hier verschijnt dan via het label-element het opschrift „Uw bericht:“. Ook hier worden de twee velden met dezelfde tekstinhoud via de attributen for en id aan elkaar gekoppeld.
Algemene aanwijzingen
Over het algemeen moeten formulieren duidelijk en eenduidig zijn. Voorspelbaarheid is ook erg nuttig. Zo kunnen gebruikers snel zien wat er van hen wordt verwacht. Een duidelijke en logische structuur is eveneens erg belangrijk. Inhoudselementen die bij elkaar horen, kunnen worden gegroepeerd. Logisch gescheiden eenheden kunnen ook visueel van elkaar worden gescheiden. Dat vergemakkelijkt de oriëntatie. Bovendien kunnen ze door middel van kleur van elkaar worden onderscheiden. Het is belangrijk dat het minimale contrast van 4,5:1 wordt aangehouden.
Gebruiksgemak van het toetsenbord
Een van de belangrijkste kenmerken voor een toegankelijk ontwerp van formuliervelden is de bedienbaarheid via het toetsenbord. Er zijn mensen die vanwege hun beperking geen muis kunnen gebruiken. Daarom is het des te belangrijker om formulieren zo te ontwerpen dat er ook met het toetsenbord doorheen kan worden genavigeerd. Het gebruik van label-elementen en aria-attributen vergemakkelijkt het begrijpen en bedienen van formulieren. Een andere manier om de bediening via het toetsenbord te vereenvoudigen, is het gebruik van sneltoetsen. Hierbij kunnen formulierelementen worden gekoppeld aan toetsencombinaties. Dit kan helpen om bepaalde delen sneller te bereiken of functies sneller te bedienen. Hiervoor wordt het `accesskey`-attribuut in HTML gebruikt. Dit attribuut wordt toegevoegd aan het element waarvoor het bedoeld is. Daar wordt eenvoudigweg de toets toegewezen die vervolgens voor de toetsenbordopdracht wordt gebruikt. Als je bijvoorbeeld aan een veld of een knop de toets „n“ toewijst, kan deze in Windows met de sneltoets (Alt + n) worden bediend.
Er moet echter op worden gelet dat deze sneltoets niet al voor een andere opdracht in de browser wordt gebruikt.
Tot het minimum beperken
Het is ook raadzaam om het geheel tot de essentie te beperken, om mensen met een beperking niet onnodig te belasten. Er mogen daarom alleen de absoluut noodzakelijke gegevens worden gevraagd. Er moet worden afgezien van het opvragen van reeds beschikbare gegevens. Daarnaast kan de zichtbaarheid van formuliervelden aan de situatie worden aangepast. Optionele invoervelden of velden die aan voorwaarden zijn gekoppeld, hoeven niet zichtbaar te zijn. Ze kunnen worden weergegeven wanneer ze nodig zijn. Zo heeft het bijvoorbeeld geen zin om de leeftijd van kinderen te vragen als eerder is geselecteerd dat er geen kinderen zijn.
Hulp en foutmeldingen
Daarnaast moet er een invoerhulp worden aangeboden. Dit kan in de vorm van een dialoogvenster of een tooltip. Hiermee kan de invoer nader worden toegelicht. Een andere mogelijkheid is een link naar een aparte helppagina. Dit zou het slagingspercentage enorm verhogen. Fouten blijven echter voorkomen. Belangrijk zijn dan zinvolle foutmeldingen. Als bijvoorbeeld bij het inloggen het wachtwoord verkeerd is ingevoerd, mag niet de melding „Gebruikersnaam of wachtwoord is onjuist“ verschijnen. Het is beter om de fout te specificeren. Correct zou hier zijn: „Het ingevoerde wachtwoord is onjuist. Voer alstublieft het juiste wachtwoord in“.
Er zijn verschillende soorten fouten. Allereerst de formaatfout. Hierbij wordt het wachtwoord in het verkeerde formaat ingevoerd. Er worden bijvoorbeeld letters in plaats van cijfers ingevoerd. Ook kunnen er waardenfouten optreden. Dit kan gebeuren wanneer er, ondanks een geldig formaat, een verkeerde waarde is ingevoerd. Een voorbeeld hiervan is het invoeren van de waarde 34 voor een dag van de datum. De melding zou dan bijvoorbeeld luiden: „De maand maart heeft 31 dagen. Voer de dag alstublieft opnieuw in“.
Een ander soort fout betreft ongeldige invoer. Hier stelt de ontwikkelaar waarden in die ongeldig zijn. Ten slotte is er nog het geval waarbij er geen invoer is gedaan in verplichte velden. Dit komt bijvoorbeeld voor wanneer het e-mailadres een verplicht veld is en de gebruiker hier geen invoer heeft gedaan. Dit gebeurt echter ook vaak bij de algemene voorwaarden. Op veel websites kun je niet verder zonder akkoord te gaan met deze verklaring.
Verplichte velden
Formulieren bevatten vaak verplichte velden. Deze moeten als zodanig worden gemarkeerd. Een veelgebruikt symbool om een verplicht veld aan te duiden is een „*“, die naast het formulierveld wordt weergegeven. In dit geval moet echter al aan het begin van het formulier worden vermeld dat de met een sterretje gemarkeerde velden verplicht zijn. Een andere mogelijkheid is om deze verplichte velden in een andere kleur of met een andere schaduw weer te geven. Deze zijn echter niet voor iedereen toegankelijk. Om ervoor te zorgen dat ook gebruikers van schermlezers ze kunnen herkennen, moet bovendien het attribuut required of aria-required worden gebruikt. Hiermee wordt aan de schermlezer meegedeeld dat het om een verplicht veld gaat.
Plaatshouder
Een manier om formulieren nog begrijpelijker en gebruiksvriendelijker te maken, is het gebruik van plaatshouders in formuliervelden. Plaatshouders zijn tijdelijke teksten die in een formulierveld worden weergegeven om de gebruiker te laten zien welk soort informatie moet worden ingevoerd. Deze teksten verdwijnen zodra er op het formulierveld wordt geklikt of het veld wordt geselecteerd, en kunnen worden vervangen door de daadwerkelijke inhoud van het formulierveld. Plaatshouders kunnen eenvoudig in het HTML-invoerelement van een formulierveld worden ingevoegd door gebruik te maken van het attribuut `placeholder`.
Invoer opslaan
Alle gebruikers moeten de mogelijkheid hebben om hun invoer op te slaan. Bij langere formulieren doen zich steeds weer problemen voor. Om gegevensverlies te voorkomen, kunnen deze gegevens worden opgeslagen. Hiervoor kan een knop worden geïmplementeerd die de huidige stand opslaat. Dit maakt het invullen van complexe formulieren een stuk eenvoudiger. Dit heeft ook het voordeel dat ontbrekende gegevens op een later tijdstip kunnen worden aangevuld. Het opnieuw invoeren van deze gegevens leidt er namelijk toe dat sommige gebruikers het formulier niet verder invullen. Dit kan zowel voor de beheerder van een website als voor de gebruiker vervelend zijn.
Authenticatie en tijdslimiet
Authenticatie verhoogt de veiligheid op internet. Het is echter ook een van de drempels die steeds weer opduiken. Deze komen vaak voor op websites waar je moet inloggen. Om deze websites voor iedereen toegankelijk te maken, moeten formulieren barrièrevrij worden ontworpen. In veel gevallen zijn de authenticatieprocedures namelijk beperkt in de tijd. Je hebt dan maar heel weinig tijd om in te loggen. Vaak is dat slechts 30 of 60 seconden. Voor veel mensen met een beperking is deze tijd niet voldoende om in te loggen. Daarom is het belangrijk om de invoer niet aan een tijdslimiet te binden.
Een ander probleem zijn captcha’s. Deze dienen om te controleren of de gebruiker een mens is en geen computer. Hier wordt de gebruiker gevraagd een vervormde afbeelding te herkennen en het resultaat in een formulierveld in te vullen. Vaak moet de gebruiker echter ook alle afbeeldingen aanklikken waarop bijvoorbeeld een auto te zien is. Deze zijn echter niet altijd toegankelijk. Blinde of slechtziende mensen kunnen deze afbeeldingen niet herkennen. Om deze barrière te omzeilen, zou er een audio-optie moeten worden aangeboden.
Samenvattend kan worden gesteld dat het toegankelijk ontwerpen van formuliervelden een belangrijke stap is op weg naar een toegankelijke digitale omgeving. Het gebruik van de juiste labels, een duidelijke en gestructureerde opbouw, bediening via het toetsenbord en passende foutmeldingen vergroten de kans dat ook mensen met een beperking de formulieren zelfstandig kunnen invullen.
