Hoe worden formulierelementen ontworpen om toegankelijk te zijn?

Iedereen heeft wel eens te maken gehad met formulieren. Vroeger meer op papier. Tegenwoordig zijn het steeds meer digitale formulieren, omdat ze de interactie van de gebruiker met een website dienen. Of het nu gaat om communicatie op internet of het bestellen van een artikel, je komt ze overal tegen. Zoeken op internet, bijvoorbeeld met Google, wordt er ook door beïnvloed. Het invullen van deze formulieren is moeilijker voor mensen met fysieke of zelfs cognitieve beperkingen, en voor blinden en slechtzienden. Om alle mensen in staat te stellen deel te nemen aan het openbare leven, moeten deze formulieren drempelvrij zijn. Maar: Hoe maak je eigenlijk toegankelijke formulierelementen?

Daar zijn verschillende technieken voor. Maar voordat je de technieken behandelt, moet je de vormelementen kennen. Ze kunnen worden onderverdeeld in verschillende typen. Er zijn onder andere de volgende typen

• invoervelden met één regel

• invoergebieden met meerdere regels

• Selectielijsten

• Keuzerondjes

• Selectievakjes

• Knoppen indienen/annuleren

Etikettering van formuliervelden

Om formulieren toegankelijk te maken, moeten de verschillende besturingselementen van labels worden voorzien. Met deze labels kunnen hulptechnologieën de functies van de besturingselementen herkennen en aan de gebruiker doorgeven. Het is belangrijk dat de labels duidelijk gekoppeld zijn aan de besturingselementen, anders kunnen schermlezers geen verbinding maken met de elementen. Als gevolg daarvan hebben gebruikers moeite om het formulier te begrijpen. Ze kunnen niet zien welke informatie in welke velden moet worden ingevoerd. Daardoor kunnen ze het formulier niet correct invullen en maken ze vaak fouten. De beschrijvingen hebben echter niet allemaal hetzelfde label. De doorslaggevende factor is of ze voor iedereen zichtbaar moeten zijn of niet. In de programmeertaal HTML wordt daarom onderscheid gemaakt tussen het labelelement en de aria-attributen. Het labelelement wordt gebruikt voor invoervelden, keuzelijsten, keuzerondjes en selectievakjes en moet dienovereenkomstig worden geplaatst. Voor invoervelden en keuzelijsten wordt het label voor de besturingselementen geplaatst. Voor keuzerondjes en selectievakjes worden ze echter na het besturingselement geplaatst. Het for attribuut moet worden toegevoegd zodat de labels ook aan het bijbehorende element kunnen worden gekoppeld.

Het aria-attribuut wordt in HTML gebruikt voor knoppen. Knoppen kunnen bijvoorbeeld staan voor verzenden of annuleren in een formulier. aria-attributen maken de beschrijvingen van de betreffende elementen alleen herkenbaar voor hulptechnologieën. Daarom kunnen ze ook worden gebruikt voor invoervelden die alleen zichtbaar moeten zijn voor de schermlezer. Er zijn veel aria-attributen die worden gebruikt om webtoegankelijkheid te verbeteren. Deze verschillen echter in type en functie. Het zogenaamde aria-label wordt gebruikt om een element te labelen. Natuurlijk is het ook mogelijk om hetzelfde label voor meerdere elementen te gebruiken. Dit wordt mogelijk gemaakt door een aria-labelledby.

Enkel- en meerregelige invoervelden

Invoervelden zijn een van de meest gebruikte elementen in formulieren. Ze kunnen éénregelig of meerregelig zijn. Eenregelige velden worden gebruikt voor korte zoekopdrachten, zoals de naam van een persoon, een e-mailadres, een adres of een plaats.

Ze worden gemaakt in HTML met de input-Tag en het type attribuut.

Daarnaast kunnen andere attributen worden toegevoegd die bijvoorbeeld de lijnlengte bepalen.

Meerregelige velden worden meestal gebruikt voor grotere tekstgebieden zoals tekstberichten. Deze worden dan gemaakt met de textarea-Tag . Ook hier kan de ontwikkelaar het aantal regels en de regellengte opgeven. Maar om deze velden toegankelijk te maken, moet de label-Tag nog steeds worden toegevoegd. Het is echter niet mogelijk om een koppeling te maken tussen het label en de elementen als ze niet uniek zijn toegewezen. Ze moeten dan worden gekoppeld via het for-attribuut en het id-attribuut. In het volgende HTML-voorbeeld worden eenvoudige labels geïmplementeerd in dergelijke invoervelden.

<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 eenregelig invoerveld voor de voornaam met het type "tekst" gemaakt. Het label "Uw voornaam:" wordt voor iedereen zichtbaar gemaakt door het labelelement. Dit wordt vóór het input-element geplaatst, omdat het vóór het invoerveld wordt uitgevoerd. Het for-attribuut in de label-Tag en het id-attribuut in het input-element verbinden deze gebieden met elkaar. Het is belangrijk dat beide inhouden identiek zijn, anders kunnen ze niet worden gekoppeld. Het name attribuut dient als identificatie voor dit veld en is nodig voor het overbrengen van de gegevens naar een serverpagina.

Vervolgens wordt een invoergebied met meerdere regels gemaakt met de tag "textarea". Hier verschijnt vervolgens het label "Uw bericht:" via het labelelement. Ook hier worden de twee gebieden met dezelfde tekstinhoud gekoppeld via de attributen for en id.

Algemene opmerkingen

Over het algemeen moeten formulieren duidelijk en ondubbelzinnig zijn. Voorspelbaarheid is ook erg nuttig. Zo kunnen gebruikers snel zien wat er van hen gevraagd wordt. Een duidelijke en zinvolle structuur is ook erg belangrijk. Verwante inhoudselementen kunnen worden gegroepeerd. Logisch gescheiden eenheden kunnen ook visueel worden gescheiden. Dit vergemakkelijkt de oriëntatie. Bovendien kunnen ze van elkaar worden gescheiden door kleur. Het is belangrijk dat het minimale contrast van 4,5:1 wordt aangehouden.

Bedienbaarheid toetsenbord

Een van de belangrijkste eigenschappen voor het toegankelijk ontwerpen van formuliervelden is de bedienbaarheid via het toetsenbord. Er zijn mensen die door hun handicap geen muis kunnen gebruiken. Daarom is het des te belangrijker om formulieren zo te ontwerpen dat ze ook met het toetsenbord te bedienen zijn. Het gebruik van labelelementen en aria attributen maakt formulieren eenvoudiger te begrijpen en te bedienen. Een andere manier om de bediening via het toetsenbord te vereenvoudigen is het gebruik van sneltoetsen. Hier kunnen formulierelementen worden opgeslagen met sneltoetsen. Dit kan helpen om bepaalde gebieden sneller te bereiken of om functies sneller te bedienen. Het accesskey-attribuut in HTML wordt hiervoor gebruikt. Dit attribuut wordt ingevoegd bij het element waarvoor het moet worden gebruikt. Daar wordt eenvoudig de toets toegewezen, die vervolgens wordt gebruikt voor de toetsenbordopdracht. Als je bijvoorbeeld de toets "n" aan een veld of knop toewijst, kan deze in Windows worden bediend met de sneltoets (Alt + n).

Zorg er wel voor dat deze sneltoets niet al voor een andere opdracht in de browser wordt gebruikt.

Vermindering tot het minimum

Het is ook raadzaam om alles tot het essentiële te beperken om mensen met een handicap niet onnodig te belasten. Daarom moeten alleen de absoluut noodzakelijke gegevens worden opgevraagd. Het opvragen van reeds bestaande gegevens moet achterwege blijven. Daarnaast kan de zichtbaarheid van formuliervelden worden aangepast aan de situatie. Optionele invoervelden of velden die gekoppeld zijn aan voorwaarden hoeven niet zichtbaar te zijn. Ze kunnen worden weergegeven wanneer ze nodig zijn. De vraag naar de leeftijd van kinderen heeft bijvoorbeeld geen zin als eerder is geselecteerd dat er geen kinderen aanwezig zijn.

Help- en foutmeldingen

Daarnaast moet een invoerhulp worden aangeboden. Dit kan in de vorm van een dialoogvenster of een tooltip. Met deze hulp kan de invoer in meer detail worden uitgelegd. Een andere mogelijkheid is een link naar een aparte helppagina. Dit zou het succespercentage enorm verhogen. Fouten gebeuren nog steeds. Belangrijk zijn dan zinvolle foutmeldingen. Als bijvoorbeeld bij het inloggen het wachtwoord verkeerd is ingevoerd, mag de melding "Gebruikersnaam of wachtwoord is onjuist" niet verschijnen. Het is beter om de fout te filteren. Correct zou hier zijn: "Het wachtwoord dat je hebt ingevoerd is onjuist. Voer het juiste wachtwoord in". 

Er zijn verschillende soorten fouten. Ten eerste de formaatfout. Hier wordt het wachtwoord in het verkeerde formaat ingevoerd. Er worden bijvoorbeeld letters ingevoerd in plaats van cijfers. Waardefouten kunnen ook voorkomen. Dit kan gebeuren wanneer een onjuiste waarde wordt ingevoerd ondanks een geldig formaat. Een voorbeeld hiervan is het invoeren van de waarde 34 voor een Tag van de datum. Het bericht zou dan bijvoorbeeld luiden "De maand maart heeft 31 dagen. Voer de Tag opnieuw in".

Een ander type fout is ongeldige invoer. Hier geeft de ontwikkelaar waarden op die ongeldig zijn. Tot slot is er de foutsoort waarbij geen invoer is gedaan voor verplichte velden. Dit gebeurt bijvoorbeeld als het e-mailadres een verplicht veld is en de invoer is vergeten. Vaak gebeurt dit ook met de algemene voorwaarden. Op veel websites kunt u niet verdergaan zonder akkoord te gaan met deze verklaring.

Verplichte velden

Formulieren bevatten vaak verplichte velden. Deze moeten als zodanig gemarkeerd worden. Een veelgebruikt symbool om een verplicht veld aan te geven is een "*" naast het formulierveld. In dit geval moet echter meteen aan het begin van het formulier worden aangegeven dat de velden met een sterretje verplichte velden zijn. Een andere optie is om deze verplichte velden in een andere kleur of arcering weer te geven. Deze zijn echter niet voor iedereen toegankelijk. Zodat gebruikers van schermlezers ze ook kunnen herkennen, moet ook het attribuut vereist of aria-vereist worden gebruikt. Dit vertelt de schermlezer dat het een verplicht veld is.

Plaatshouder

Een manier om formulieren nog begrijpelijker en gebruiksvriendelijker te maken is het gebruik van plaatsaanduidingen in formuliervelden. Plaatshouders zijn tijdelijke teksten die in een formulierveld verschijnen om de gebruiker aan te geven welk type informatie ingevoerd moet worden. Deze teksten verdwijnen als er op het formulierveld wordt geklikt of als er op wordt gefocust, en kunnen worden vervangen door de daadwerkelijke inhoud van het formulierveld. Plaatshouders kunnen eenvoudig worden ingevoegd in het HTML invoerelement van een formulierveld met behulp van het placeholder attribuut.

Invoer opslaan

Alle gebruikers moeten de mogelijkheid hebben om hun invoer op te slaan. Er treden steeds weer problemen op met langere formulieren. Om gegevensverlies hier te voorkomen, kunnen ze worden opgeslagen. Hiervoor kan een knop worden geïmplementeerd die de huidige status opslaat. Dit maakt het invullen van complexe formulieren eenvoudiger. Dit heeft ook het voordeel dat ontbrekende gegevens op een later tijdstip kunnen worden ingevuld. Het herhalen van deze invoer zorgt er namelijk voor dat sommige gebruikers stoppen met het invullen van het formulier. Dit kan vervelend zijn voor zowel de beheerder van een website als de gebruiker.

Authenticatie en tijdslimiet

Authenticatie verhoogt de veiligheid op het internet. Het is echter ook een van de barrières die steeds weer opduiken. Deze komen vaak voor op websites waar moet worden ingelogd. Maar om deze voor iedereen toegankelijk te maken, moeten formulieren drempelvrij worden ontworpen. In veel gevallen zijn verificatieprocedures namelijk tijdgebonden. Mensen hebben dan weinig tijd om in te loggen. Vaak is dat maar 30 of 60 seconden. Voor veel mensen met een handicap is dit niet genoeg tijd om in te loggen. Daarom is het belangrijk om de invoer niet te beperken door een tijd.

Captcha's vormen een ander probleem. Ze worden gebruikt om de gebruiker te identificeren als mens en niet als computer. Hier wordt de gebruiker gevraagd een vervormde afbeelding te identificeren en het resultaat in een formulierveld in te voeren. Vaak moeten echter alle afbeeldingen worden aangeklikt, bijvoorbeeld afbeeldingen van een auto. Deze zijn echter niet altijd barrièrevrij. Blinden en slechtzienden kunnen deze afbeeldingen niet herkennen. Om deze barrière te omzeilen, moet een audio-optie worden aangeboden.

Samengevat is het toegankelijk ontwerpen van formuliervelden een belangrijke stap op weg naar een toegankelijke digitale omgeving. Het gebruik van correcte benamingen, een duidelijke en gestructureerde lay-out en bediening via het toetsenbord en bijbehorende foutmeldingen vergroten de kans dat mensen met een beperking de formulieren ook zelfstandig kunnen invullen.