Iedereen heeft wel eens te maken gehad met formulieren. Vroeger meer op papier. Tegenwoordig zijn het steeds meer digitale formulieren, omdat ze worden gebruikt voor interactie tussen gebruikers en een website. Of je nu online communiceert of iets bestelt, je komt ze overal tegen. Ook zoekopdrachten op internet, bijvoorbeeld met Google, hebben ermee te maken. Het invullen van deze formulieren is moeilijk voor mensen met fysieke of cognitieve beperkingen en voor blinden en slechtzienden. Om iedereen in staat te stellen deel te nemen aan het openbare leven, moeten deze formulieren toegankelijk zijn. Maar hoe maak je eigenlijk toegankelijke formulierelementen?
Daar zijn verschillende technieken voor. Maar voordat je de technieken onder de knie krijgt, moet je vertrouwd raken met de vormelementen. Deze kunnen worden onderverdeeld in verschillende typen. Er zijn onder andere de volgende typen
- Eenregelige invoervelden
- invoergebieden voor meerdere regels
- Selectielijsten
- Keuzerondjes
- Selectievakjes
- Knoppen om te verzenden/annuleren
Etikettering van formuliervelden
Om toegankelijkheid in formulieren te bereiken, moeten de verschillende bedieningselementen worden gelabeld. Met deze labels kunnen hulptechnologieën de functies van de bedieningselementen herkennen en aan de gebruiker doorgeven. Het is belangrijk dat de labels duidelijk gekoppeld zijn aan de besturingselementen, anders kunnen screenreaders geen verbinding maken met de elementen. Als gevolg daarvan zullen gebruikers moeite hebben om het formulier te begrijpen. Ze kunnen niet herkennen welke informatie in welke velden moet worden ingevoerd. Daardoor kunnen ze het formulier niet correct invullen en maken ze vaak fouten. De beschrijvingen zijn echter niet allemaal hetzelfde gelabeld. 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 gepositioneerd. Voor invoervelden en keuzelijsten wordt het label vóór 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 de verzend- of annuleerfunctie in een formulier weergeven. Met aria-attributen zijn de beschrijvingen van de betreffende elementen alleen herkenbaar voor hulptechnologieë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 internet te verbeteren. Deze verschillen echter in type en functie. Het zogenaamde aria-label wordt gebruikt om een element te labelen. Het is natuurlijk ook mogelijk om hetzelfde label voor meerdere elementen te gebruiken. Dit wordt mogelijk gemaakt door een aria-labelby.
Enkelvoudige en meervoudige invoervelden
Invoervelden behoren tot de meest gebruikte elementen in formulieren. Ze kunnen éénregelig of meerregelig zijn. Eenregelige velden worden gebruikt voor korte zoekopdrachten, bijvoorbeeld naar de naam van een persoon, een e-mailadres, een straat of een plaats.
Ze worden gemaakt in HTML met de input-Tag en het type attribuut.
Er kunnen ook extra attributen worden toegevoegd, bijvoorbeeld om de lijnlengte te definiëren.
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. Om deze velden toegankelijk te maken, moet echter het label-Tag worden toegevoegd. Het is echter niet mogelijk om een koppeling te maken tussen het label en de elementen als deze niet duidelijk zijn toegewezen. Deze moeten dan aan elkaar 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 het labelelementTag en het id-attribuut in het input-element worden gebruikt om deze gebieden aan elkaar te koppelen. Het is hier belangrijk dat beide inhouden identiek zijn, omdat ze anders niet kunnen 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". Het labelelement toont vervolgens het opschrift "Uw bericht:". Ook hier worden de twee gebieden met dezelfde tekstinhoud aan elkaar gekoppeld met behulp van de attributen for en id.
Algemene informatie
Over het algemeen moeten formulieren duidelijk en ondubbelzinnig zijn. Voorspelbaarheid is ook erg nuttig. Zo kunnen gebruikers snel herkennen 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 gescheiden worden. Dit vergemakkelijkt de oriëntatie. Ze kunnen ook van elkaar gescheiden worden 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 dat ze via het toetsenbord kunnen worden bediend. 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 het eenvoudiger om formulieren te begrijpen en te gebruiken. Een andere manier om de bediening via het toetsenbord te vereenvoudigen is het gebruik van sneltoetsen. Aan formulierelementen kunnen toetscombinaties worden toegewezen. 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 toegevoegd aan het element waarvoor het gebruikt moet worden. De toets die vervolgens voor de toetsenbordopdracht wordt gebruikt, wordt daar eenvoudigweg toegewezen. Als je bijvoorbeeld de toets "n" toewijst aan een veld of knop, kan deze in Windows worden bediend met de sneltoets (Alt + n).
Het is echter belangrijk om ervoor te zorgen dat deze snelkoppeling niet al wordt gebruikt voor een andere opdracht in de browser.
Vermindering tot het minimum
Het is ook raadzaam om het hele proces tot het essentiële te beperken om mensen met een handicap niet onnodig te belasten. Daarom mogen alleen de absoluut noodzakelijke gegevens worden opgevraagd. Bestaande gegevens mogen niet worden opgevraagd. 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 als ze verplicht zijn. Het heeft bijvoorbeeld geen zin om naar de leeftijd van kinderen te vragen als u eerder hebt geselecteerd dat er geen kinderen zijn.
Help- en foutmeldingen
Er moet ook hulp bij het invoeren worden geboden. Dit kan in de vorm van een dialoogvenster of een tooltip. Deze kunnen worden gebruikt om de invoer in meer detail uit te leggen. Een andere optie is een link naar een aparte helppagina. Dit zou het succespercentage enorm verhogen. Fouten gebeuren nog steeds. Betekenisvolle foutmeldingen zijn dan belangrijk. 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 als een onjuiste waarde wordt ingevoerd ondanks een geldig formaat. Een voorbeeld hiervan is het invoeren van de waarde 34 voor een datum op Tag . Het bericht zou dan luiden: "De maand maart heeft 31 dagen. Voer de waarde Tag opnieuw in".
Een ander type fout is ongeldige invoer. Hier geeft de ontwikkelaar waarden op die ongeldig zijn. Tot slot is er het fouttype wanneer er geen invoer is gedaan voor verplichte velden. Dit komt bijvoorbeeld voor als de e-mailadresvraag een verplicht veld is en de invoer is vergeten. Dit gebeurt echter ook vaak bij 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 "*", die naast het formulierveld staat. In dit geval moet echter aan het begin van het formulier worden aangegeven dat de velden met een sterretje verplicht zijn. Een andere optie is om deze verplichte velden in een andere kleur of tint weer te geven. Deze zijn echter niet voor iedereen toegankelijk. Om ervoor te zorgen dat gebruikers van schermlezers ze ook kunnen herkennen, moet ook het kenmerk vereist of aria-vereist worden gebruikt. Dit laat de schermlezer weten dat het om een verplicht veld gaat.
Plaatshouder
Een manier om formulieren nog begrijpelijker en gebruiksvriendelijker te maken is het gebruik van placeholders in formuliervelden. Plaatshouders zijn tijdelijke teksten die worden weergegeven in een formulierveld om de gebruiker aan te geven welk type informatie ingevoerd moet worden. Deze teksten verdwijnen zodra er op het formulierveld geklikt wordt en kunnen vervangen worden 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 zijn altijd problemen met langere formulieren. Om gegevensverlies hier te voorkomen, kunnen deze worden opgeslagen. Hiervoor kan een knop geïmplementeerd worden die de huidige status opslaat. Dit maakt het makkelijker om complexe formulieren in te vullen. Dit heeft ook het voordeel dat ontbrekende gegevens later kunnen worden toegevoegd. Het herhalen van deze invoer leidt ertoe dat sommige gebruikers het formulier niet invullen. Dit kan vervelend zijn voor zowel de websitebeheerder 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. Om ervoor te zorgen dat deze voor iedereen toegankelijk zijn, moeten formulieren echter drempelvrij worden ontworpen. In veel gevallen zijn verificatieprocedures beperkt in de tijd. Je hebt dan maar heel 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. Het is daarom belangrijk om geen tijdslimiet in te stellen voor het inloggen.
Captcha's vormen nog een probleem. Ze worden gebruikt om de gebruiker te identificeren als een persoon en niet als een computer. Hier wordt de gebruiker gevraagd om een vervormd beeld te identificeren en het resultaat in een formulierveld in te voeren. Vaak moeten echter ook alle afbeeldingen worden aangeklikt, bijvoorbeeld afbeeldingen van een auto. Deze zijn echter niet altijd toegankelijk. Blinden en slechtzienden kunnen deze afbeeldingen niet herkennen. Om deze barrière te overwinnen, moet een audio-optie worden aangeboden.
Samenvattend kan gezegd worden dat het toegankelijk ontwerpen van formuliervelden een belangrijke stap is op weg naar een toegankelijke digitale omgeving. Het gebruik van correcte labels, 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.
