Maak zelf webformulieren beter toegankelijk
Ook formulieren moeten voldoen aan specifieke eisen van toegankelijkheid om ervoor te zorgen dat iedereen ze kan gebruiken. Deze eisen zijn gebaseerd op de richtlijnen van de WCAG (Web Content Accessibility Guidelines).
Hier volgen praktische tips om je webformulier toegankelijk te maken. Plus voorbeelden om het in je cms of code (als je volledige toegang hebt) direct aan te passen.
Inhoudsopgave - 8 praktische accessibility tips
1. Gebruik duidelijke en beschrijvende labels
- Wat: Elk formulieronderdeel (tekstvelden, selectievakjes, knoppen, etc.) moet een duidelijke en beschrijvende label hebben
- Waarom: Zodat gebruikers weten wat er van hen wordt verwacht
- Hoe: Gebruik een
<label>-element dat gekoppeld is aan het formulieronderdeel metfor
<label for="email">E-mailadres</label>
<input type="email" id="email" name="email">
2. Bied veldinstructies en foutmeldingen
- Wat: Geef duidelijke aanwijzingen en feedback, zoals wat een gebruiker moet invullen of wat er fout ging.
- Waarom: Gebruikers met cognitieve of visuele beperkingen moeten kunnen begrijpen wat van hen verwacht wordt
- Hoe:
- Gebruik placeholdertekst spaarzaam; combineer deze liever met duidelijke labels
- Toon foutmeldingen direct na een fout met tekst die uitlegt wat het probleem is
- Gebruik ARIA-attributes, zoals
aria-describedby, om fouten te beschrijven.htmlCode kopiëren
<label for="username">Gebruikersnaam</label>
<input type="text" id="username" aria-describedby="username-error">
<span id="username-error"
class="error">Gebruikersnaam is verplicht.</span>
3. Maak formulieren navigeerbaar via toetsenbord
- Wat: Zorg dat alle onderdelen van het formulier met een toetsenbord toegankelijk zijn.
- Waarom: Sommige gebruikers kunnen geen muis gebruiken en vertrouwen op het toetsenbord.
- Hoe:
- Zorg dat de tabvolgorde logisch is
- Gebruik standaard HTML-elementen voor invoer (zoals
<input>en<button>) i.p.v. custom elementen die mogelijk de focus verliezen
4. Zorg voor voldoende contrast en visuele feedback in het formulier
- Wat: Zorg dat tekst en visuele signalen voldoende contrast hebben en duidelijk zichtbaar zijn.
- Waarom: Mensen met visuele beperkingen hebben baat bij goed contrast.
- Hoe:
5. Gebruik semantische HTML
- Wat: Gebruik standaard HTML-elementen en pas waar nodig ARIA-attributes toe.
- Waarom: Browsers en screenreaders herkennen standaard elementen beter.
- Hoe:
- Gebruik
<fieldset>en<legend>voor gerelateerde velden
- Gebruik
<fieldset>
<legend>Persoonlijke gegevens</legend>
<label for="voornaam">Voornaam</label>
<input type="text" id="voornaam" name="voornaam">
</fieldset>
6. Informeer gebruikers over de voortgang
- Wat: Bij lange formulieren, geef aan hoeveel stappen de gebruiker heeft doorlopen.
- Waarom: Gebruikers met cognitieve beperkingen kunnen gefrustreerd raken door lange processen zonder overzicht.
- Hoe:
- Gebruik een voortgangsindicator / vortgangsbalk met cijfers / progress indicator
<div aria-label="Stap 2 van 4">Stap 2 van 4</div>
7. Zorg voor flexibele invoer
- Wat: Ondersteun verschillende invoerformaten en validaties.
- Waarom: Gebruikers kunnen moeite hebben met specifieke formats
- Hoe:
- Sta bijvoorbeeld bij telefoonnummers spaties, streepjes en internationale codes toe.
- Voorzie velden van beschrijvende uitleg over de verwachte invoer.