Toegankelijke formuliervalidatie

Doel van dit artikel

Toegankelijke webformulieren zijn belangrijk om vlot te communiceren met je doelpubliek. Een essentiëel element hierin is een toegankelijke formuliervalidatie. Dit artikel gaat dieper in op de vereisten van de Web Content Accessibility Guidelines voor toegankelijke formuliervalidatie en reikt een aantal technieken aan om te voldoen aan deze richtlijnen.

Kort samengevat

WCAG bevat richtlijnen op 3 verschillende niveau's. Niveau A is voldoende om het AnySurfer-label te behalen.

• A-niveau: voeg labels en instructies toe aan je formulier. Toon voor elk fout ingevuld veld een aparte en duidelijke melding aan de gebruiker.
• AA-niveau: voorkom zo veel mogelijk problemen door op voorhand na te denken over potentiële invoerfouten. Bied voor deze fouten een oplossing aan wanneer je gebruiker ze tegenkomt. Zorg ervoor dat:
  • De acties van de gebruiker ongedaan gemaakt kunnen worden.
  • De gebruiker de ingevoerde gegevens kan nakijken en verbeteren alvorens te versturen.
  • Het formulier een automatische validatie van de gegevens uitvoert alvorens te versturen.
• AAA-niveau: voeg extra hulpmiddelen toe aan je formulier.

Hoe zorg je er voor dat je formuliervalidatie op een toegankelijke manier gebeurt?

Gebruik toegankelijke formulieren.

Wanneer een gebruiker je formulier verzendt, kijkt het formulier na of alle informatie die de gebruiker ingaf, correct is. Indien wel, wordt het formulier verstuurd. Indien niet, ontvangt de gebruiker een foutmelding. De Web Content Accessibility Guidelines bevatten een aantal bepalingen waaraan deze foutmelding moet voldoen.

Niveau A

Foutmeldingen (A)

Indien je formulier een fout detecteert, moet het probleem geïndentificeerd en beschreven worden voor de gebruiker. Anders weet deze niet wat er fout is gegaan, en kan hij of zij de fout niet corrigeren. Bijgevolg kan het formulier dus ook niet verstuurd worden.

Hou er rekening mee dat foutmeldingen altijd duidelijk onderscheidbaar moeten zijn van de rest van de website. Deze moeten ook gemakkelijk te begrijpen zijn voor de gebruiker. Indien je meerdere foutmeldingen hebt, toon deze dan steeds apart bij elk verkeerd ingevuld veld. Zo is het voor de gebruiker duidelijk welke velden fout waren. Tenslotte moet je steeds aan je gebruiker melden wanneer deze de gemaakte fout gecorrigeerd heeft.

De onderstaande lijst bevat een aantal technieken die je kan gebruiken om aan dit punt te voldoen:

• Duid de niet ingevulde of fout ingevulde velden aan met tekst. Indien een verplicht veld niet is ingevuld, moet dit weergegeven worden. Indien een veld verkeerd ingevuld werd, leg je gebruiker dan uit hoe hij of zij het veld wel correct kan invullen. Dit kan bijvoorbeeld door een invulformaat weer te geven (DD-MM-YYYY, naam@mailclient.be, +0032/XXX.XX.XX.XX, ...).
• Gebruik `aria-required="true"` om aan schermlezers te melden dat een veld verplicht is.
• Gebruik `aria-invalid` om een foutmelding over een specifiek veld weer te geven voor schermlezergebruikers. Dit attribuut heeft vier mogelijkheden:
  • aria-invalid="false": geen fout gevonden.
  • aria-invalid="grammar": grammaticale fout gevonden.
  • aria-invalid="spelling": spelfout gevonden.
  • aria-invalid="true": algemene fout gevonden.
• Gebruik `aria-live` om foutmeldingen door schermlezers te laten voorlezen indien de meldingen aanpassingen aan de pagina zijn die plaatsvinden zonder dat de pagina herlaadt. Voeg `aria-atomic="false"` toe indien enkel de foutmelding zelf moet voorgelezen worden zonder diens context. Het `aria-live` attribuut heeft drie veel voorkomende instellingen:
  • aria-live="off": melding wordt niet voorgelezen (standaard instelling).
  • aria-live="polite": melding wordt pas voorgelezen eens alle andere geplande meldingen zijn voorgelezen.
  • aria-live="assertive": alle voorgaande meldingen worden stopgezet ten voordele van deze melding.
• Gebruik `Role="alertdialog"` om een pop-up melding te creëren. Hier zijn vier voorwaarden aan verbonden:
  • De melding moet een label dragen (`aria-label` of `aria-labelledby`).
  • De melding moet een beschrijving hebben (`aria-describedby`).
  • De melding moet minstens een knop bevatten waarmee je hem opnieuw kan sluiten. Deze knop moet bereikbaar zijn via de tabtoets zonder dat de gebruiker per ongeluk uit het pop-up venster kan tabben.
  • Wanneer de melding gesloten wordt, moet de focus opnieuw liggen op het fout ingevulde veld die deze melding getriggerd heeft.
• Je kan de locatie van de fout visueel benadrukken, bijvoorbeeld met behulp van kleur en een dikkere omranding van het veld.
• Je kan een geluid koppelen aan je foutmelding.

Meer informatie over bovenstaande aria-attributen vind je op W3C.

Labels en instructies (A)

Je formulier moet instructies bevatten over hoe het ingevuld moet worden. Dit kan via labels en instructies:

• Voeg een tekst toe dat uitleg geeft over het formulier.
• Voeg invulformaten toe aan velden die op een specifieke wijze ingevuld moeten worden (bijvoorbeeld DD-MM-YYYY, naam@mailclient.be, +0032/XXX.XX.XX.XX, ...).
• Met `aria-describedby` voeg je beschrijvingen voor schermlezers toe aan je velden.
• Label je velden met `aria-label` of `aria-labelledby`.
• Met `role="group"` kan je aan schermlezers aangeven dat een aantal elementen tot dezelfde groep behoren. Dit is nuttig bij bijvoorbeeld een selectie samenhorende radioknoppen.

Niveau AA

Foutsuggesties (AA)

Denk op voorhand na over fouten die veel zullen voorkomen. Typische voorbeelden zijn e-mailadressen zonder @-symbool, of telefoonnummers die te weinig cijfers bevatten om geldig te zijn. Bouw je formulier zo op dat deze dit soort fouten herkent en er een oplossing voor biedt aan de gebruiker. Enkele mogelijkheden om dit te implementeren:

• Gebruik `aria-invalid` om een foutmelding, inclusief een mogelijke oplossing, weer te geven voor schermlezergebruikers.
• Gebruik `aria-live` om foutmeldingen door schermlezers te laten voorlezen indien je foutmeldingen aanpassingen aan de pagina zijn die plaatsvinden zonder dat de pagina herladen wordt.
• Gebruik `Role="alertdialog"` om een pop-up melding met extra uitleg voor de gebruiker te laten verschijnen.

Fouten voorkomen (AA)

Voorkomen is beter dan genezen! Dit is essentiëel bij formulieren die leiden tot legaal bindende contracten, bij financiële transacties, bij formulieren waarmee de gebruiker informatie uit een database aanpast of verwijderd, en bij kwesties als enquêtes en examens. Je kan drie zaken implementeren om fouten te voorkomen:

• De acties die de gebruiker doet bij het invullen van het formulier, moeten kunnen ongedaan gemaakt worden. Informeer de gebruiker ook over hoe hij of zij ingevulde gegevens kan aanpassen nadat het formulier al verstuurd is. Twee mogelijkheden zijn om een extra mailtje te sturen, of door het formulier opnieuw in te vullen.
• De gebruiker moet de informatie die hij of zij heeft ingegeven kunnen nakijken en corrigeren vooraleer deze het formulier verstuurd. Om zeker te zijn dat dit ook gebeurt, kan je aan het einde van het formulier een checkbox toevoegen die de gebruiker moet aanduiden ter bevestiging dat hij of zij alle gegevens heeft nagekeken. Hou er rekening mee dat dergelijke checkboxen volgens de Belgische wetgeving nooit op voorhand aangevinkt mogen zijn en dus manueel door de gebruiker aangevinkt moeten worden.
• Het formulier moet een eigen automatische validatie van de ingegeven informatie uitvoeren wanneer de gebruiker het formulier verstuurd. Indien het formulier fouten vindt, moet de gebruiker hiervan op de hoogte gebracht worden en moeten deze corrigeerbaar zijn.

Een extra punt om te onthouden bij het vermijden van fouten: wanneer je formulier in staat is om informatie te verwijderen uit een database, moet deze altijd op voorhand toestemming vragen aan de gebruiker hiervoor. Bijvoorbeeld: het opzeggen van een nieuwsbrief, een facturatie-adres verwijderen tijdens het online winkelen, enquête-antwoorden ongedaan maken, ...

Niveau AAA

Hulp bieden (AAA)

Bied je gebruiker hulp aan bij het invullen van je formulier. Hier zijn heel wat mogelijkheden voor:

• Zorg voor tekstuele verduidelijking over het formulier.
• Voeg instructies toe aan velden die een specifieke input nodig hebben (bijvoorbeeld correcte invulformaten).
• Voeg een link toe naar een FAQ.
• Bied spellingscontrole en suggesties aan de gebruiker aan.
• Voeg een online chatfunctie met een bot of helpdesk toe.
• Zorg voor een e-mailadres waar gebruikers vragen kunnen stellen.

Veelgemaakte fouten

Test of je formulier de volgende fouten bevat alvorens het live te plaatsen!

• Foutief ingevulde velden worden slechts op één manier aangeduid. Een typisch voorbeeld is om het foute veld aan te duiden met behulp van een rode rand. Blinden en mensen met kleurenblindheid kunnen dit niet zien. Een screenreader is zich niet bewust van de kleurverandering.
• Bij een foutmelding springt de focus niet naar het fout ingevulde veld. Dit zorgt bij de gebruiker voor verwarring over welk veld gecorrigeerd moet worden.
• Een foutmelding wordt slechts eenmaal aangeduid voor een repetitieve fout. Een voorbeeld is een formulier met veel verplichte velden waar er slechts eenmalig de boodschap "Veld is verplicht" getoond wordt, terwijl er meerdere verplichte velden niet zijn ingevuld. Dit zorgt er voor dat de gebruiker niet weet dat er meerdere velden gecorrigeerd moeten worden.
• Er zijn geen invulformaten voorzien voor velden die slechts een specifieke input accepteren. Dit komt vaak voor bij data, rijksregisternummers, telefoonnummers, ... Hierdoor weet de gebruiker niet in welk formaat hij of zij het veld moet invullen, wat tot fouten leidt.
• Foutmeldingen worden niet weergeven voor blinde gebruikers, bijvoorbeeld door het gebrek aan het `aria-live` attribuut bij foutmeldingen waarbij de pagina niet herladen wordt. Blinde gebruikers weten hierdoor niet welke velden fout zijn en waarom het formulier niet verstuurd wordt.
• Er zijn geen labels toegevoegd aan de velden, waardoor blinde gebruikers niet weten waar het veld over gaat.
• Foutmeldingen worden slechts enkele seconden getoond. Beter is om de melding permanent op het scherm te plaatsen totdat de fout gecorrigeerd is. Dyslecten en slechtzienden kunnen de fout niet lezen wanneer deze te kort getoond wordt. Mensen met geheugenproblemen kunnen de inhoud niet opnieuw bekijken. Gebruikers met concentratiestoornissen zullen hem mogelijk niet opgemerkt hebben.

Conclusie

• A-niveau: voeg labels en instructies toe aan je formulier. Toon voor elk fout ingevuld veld een aparte en duidelijke melding aan de gebruiker.
• AA-niveau: voorkom zo veel mogelijk problemen door op voorhand na te denken over potentiële invoerfouten. Bied voor deze fouten een oplossing aan wanneer je gebruiker ze tegenkomt. Zorg voor een automatische validatie van de gegevens, maan de gebruiker aan om zelf ook alles na te kijken en te corrigeren waar nodig, en zorg ervoor dat de gebruikersacties ongedaan kunnen gemaakt worden.
• AAA-niveau: voeg extra hulpmiddelen toe aan je formulier.