Je wilt je bezoek helpen om een formulier zo goed en makkelijk mogelijk in te vullen. Dus geef je extra informatie boven een formulier, bij een formulierveld, je groepeert informatie en voegt kopjes toe voor de overzichtelijkheid en je schrijft duidelijke foutmeldingen. Hoe doe je dit een toegankelijke manier?
We geven je een overzicht van oplossingen en voorbeelden en vertellen ook wat je wel en ook juist niet moet doen. We gebruiken hierbij de NL Design System-richtlijnen voor formulieren en de WCAG-succescriteria.
In de blogpost Toegankelijke foutmeldingen in formulieren staat hoe je moet omgaan met foutmeldingen.
Deze tips zijn voor contentmanagers, (UX-)designer en developers.
Voor het invullen
Vertel boven het formulier welke gegevens de gebruiker alvast moet verzamelen, afhankelijk van het formulier. Zoals het paspoortnummer of burgerservicenummer. Dit voorkomt stress bij het invullen, zeker als een tijdslimiet op het invullen is gezet. Vertel bij een meerstappenformulier ook hoeveel stappen er zijn, dan weet een gebruiker wat te verwachten.
Let op developers en designers: Informatie boven het formulier moet ook echt boven het <form> element staan en onder het kopje wat bij het formulier (of de stap) hoort. Dit geldt ook de samenvatting van de foutmeldingen.
Groepeer informatie
Laat zien welke formuliervelden bij elkaar horen. Dat maakt het begrijpen van het formulier en het invullen gemakkelijker.
Bijvoorbeeld voor 'Uw gegevens' of 'Factuuradres'. Groeperen kan in een <fieldset> en de bijbehorende <legend> dient als naam voor de groep. Laat de legend dan ook nooit weg.
Bijvoorbeeld:
In de code:
codevoorbeeld<fieldset>
<legend>Uw gegevens</legend>
<label for="naam">Voor- en achternaam</label>
<input id="naam" type="text">
<label for="email">E-mailadres</label>
<input id="email" type="text">
<label for="tel">Telefoonnummer</label>
<input id="tel" type="text">
</fieldset>
Bij de richtlijn Legends bij een fieldset staat een video waarbij een fieldset wordt voorgelezen met een screenreader. Het juiste gebruik van een fieldset en legend maakt het formulier ook voor slechtziende en blinde gebruikers makkelijker te begrijpen.
In de richtlijn Descriptions bij een fieldset staat hoe je een description toevoegd aan een fieldset.
De legend kan met CSS weergegeven worden als een kopje, of ook daadwerkelijk een kopje bevatten.
Beide oplossingen zijn goed:
codevoorbeeld<legend>Uw gegevens</legend>
en
codevoorbeeld<legend><h3>Uw gegevens</h3></legend>
Gebruik je een kopje, zorg er dan voor dat het niveau past binnen de koppenstructuur van de pagina.
Schrijf een duidelijke description
Duidelijke informatie in een description bij een invoerveld is essentieel. Vertel duidelijk wat de verwachte invoer moet zijn. Bijvoorbeeld de eisen voor een nieuw wachtwoord of wat een BSN-nummer is en waar je dat kunt vinden.
Omdat descriptions zo belangrijk zijn, valt er ook veel over te vertellen. Bij onze richtlijnen voor descriptions staat waar deze aan moeten voldoen voor de beste gebruikerservaring en hoe je voor descriptions aan WCAG kunt voldoen.
Zoals:
- Hoe koppel je een description in code aan het bijbehorende formulierveld?
- Hoe lang kan de tekst van een description zijn en wat kun je wel en wat niet in een description zetten?
- Wat is de beste plek voor een description?
- Hoe voeg je meerdere descriptions toe?
- Hoe koppel je een description aan een fieldset?
- Hoe groot moet het aanklikbare gedeelte zijn voor een formulierveld als je een description gebruikt?
Verberg geen essentiële informatie achter een icoontje
Heb je heel veel te vertellen bij een formulierveld? Dan is de verleiding groot om de informatie onder een tooltip te verbergen. En dan liefst onder een klein icoontje van een vraagteken. Zo blijft het formulier zelf lekker overzichtelijk. Maar de kans bestaat dat de gebruiker zo essentiële informatie mist.
Bij de richtlijn Gebruik alleen tekst in descriptions staat een 'Description-beslisboom' waarmee je kunt bepalen hoe je omgaat met veel informatie bij een formulierveld, of met opgemaakte tekst in een description.
Na het versturen
Vertel de gebruiker dat een formulier succesvol verstuurd is en afhankelijk van het formulier wat de vervolgstappen zijn en hoe ze bij vragen contact kan opnemen. Lees hierover de richtlijnen over de bevestigingspagina.
Conclusie
Goede communicatie met de invuller van je formulier is belangrijk, help de gebruiker zo goed mogelijk. Hoe je dit doet, is een samenspel van de contentmanager, de (UX-)designer, developer en de gebruikers. Doe geen aannames, maar gerbuikersonderzoek. Want dan pas weet je of je formulier optimaal voor iedereen werkt.