Digitale toegankelijkheid: wat kun je doen om formulieren toegankelijk te maken?

funny plaatje van webformulieren

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

  • Waarom: Mensen met visuele beperkingen hebben baat bij goed contrast.
  • Hoe:
    • Gebruik kleuren met voldoende contrast
    • Zorg dat foutmeldingen niet alleen met kleur worden aangegeven, maar ook met tekst of symbolen
    • Gebruik een contrastchecker. Bijvoorbeeld webaim contrast checker

    • 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
    				
					<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.

    8. Test met hulpmiddelen en gebruikers

    • Wat: Controleer formulieren met screenreaders, toetsenbordnavigatie en tools zoals WAVE of AXE.
    • Waarom: Om de meest ideale formulieren te creëren
    • Hoe:
      • Gebruik tools zoals NVDA, JAWS of VoiceOver
      • Laat echte gebruikers met beperkingen je formulier testen
  • Waarom: Mensen met visuele beperkingen hebben baat bij goed contrast.
  • Hoe:
    • Gebruik kleuren met voldoende contrast
    • Zorg dat foutmeldingen niet alleen met kleur worden aangegeven, maar ook met tekst of symbolen
    • Gebruik een contrastchecker. Bijvoorbeeld webaim contrast checker

    • 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
    				
					<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.

    8. Test met hulpmiddelen en gebruikers

    • Wat: Controleer formulieren met screenreaders, toetsenbordnavigatie en tools zoals WAVE of AXE.
    • Waarom: Om de meest ideale formulieren te creëren
    • Hoe:
      • Gebruik tools zoals NVDA, JAWS of VoiceOver
      • Laat echte gebruikers met beperkingen je formulier testen

    5. Gebruik semantische HTML

    				
					<fieldset>
  <legend>Persoonlijke gegevens</legend>
  <label for="voornaam">Voornaam</label>
  <input type="text" id="voornaam" name="voornaam">
</fieldset>

    6. Informeer gebruikers over de voortgang

    				
					<div aria-label="Stap 2 van 4">Stap 2 van 4</div>

    7. Zorg voor flexibele invoer

    8. Test met hulpmiddelen en gebruikers

  • Hoe:

    • 4. Zorg voor voldoende contrast en visuele feedback in het formulier

    5. Gebruik semantische HTML

    				
					<fieldset>
  <legend>Persoonlijke gegevens</legend>
  <label for="voornaam">Voornaam</label>
  <input type="text" id="voornaam" name="voornaam">
</fieldset>

    6. Informeer gebruikers over de voortgang

    				
					<div aria-label="Stap 2 van 4">Stap 2 van 4</div>

    7. Zorg voor flexibele invoer

    8. Test met hulpmiddelen en gebruikers

  • Hoe:

    • 4. Zorg voor voldoende contrast en visuele feedback in het formulier

    5. Gebruik semantische HTML

    				
					<fieldset>
  <legend>Persoonlijke gegevens</legend>
  <label for="voornaam">Voornaam</label>
  <input type="text" id="voornaam" name="voornaam">
</fieldset>

    6. Informeer gebruikers over de voortgang

    				
					<div aria-label="Stap 2 van 4">Stap 2 van 4</div>

    7. Zorg voor flexibele invoer

    8. Test met hulpmiddelen en gebruikers

    4. Zorg voor voldoende contrast en visuele feedback in het formulier

    5. Gebruik semantische HTML

    				
					<fieldset>
  <legend>Persoonlijke gegevens</legend>
  <label for="voornaam">Voornaam</label>
  <input type="text" id="voornaam" name="voornaam">
</fieldset>

    6. Informeer gebruikers over de voortgang

    				
					<div aria-label="Stap 2 van 4">Stap 2 van 4</div>

    7. Zorg voor flexibele invoer

    8. Test met hulpmiddelen en gebruikers

  • Hoe: Gebruik een <label>-element dat gekoppeld is aan het formulieronderdeel met for
    • 				
					<label for="email">E-mailadres</label> 
<input type="email" id="email" name="email">
    voorbeeld om een label toe te voegen

    2. Bied veldinstructies en foutmeldingen

    				
					<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

    4. Zorg voor voldoende contrast en visuele feedback in het formulier

    5. Gebruik semantische HTML

    				
					<fieldset>
  <legend>Persoonlijke gegevens</legend>
  <label for="voornaam">Voornaam</label>
  <input type="text" id="voornaam" name="voornaam">
</fieldset>

    6. Informeer gebruikers over de voortgang

    				
					<div aria-label="Stap 2 van 4">Stap 2 van 4</div>

    7. Zorg voor flexibele invoer

    8. Test met hulpmiddelen en gebruikers

  • Hoe: Gebruik een <label>-element dat gekoppeld is aan het formulieronderdeel met for
    • 				
					<label for="email">E-mailadres</label> 
<input type="email" id="email" name="email">
    voorbeeld om een label toe te voegen

    2. Bied veldinstructies en foutmeldingen

    				
					<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

    4. Zorg voor voldoende contrast en visuele feedback in het formulier

    5. Gebruik semantische HTML

    				
					<fieldset>
  <legend>Persoonlijke gegevens</legend>
  <label for="voornaam">Voornaam</label>
  <input type="text" id="voornaam" name="voornaam">
</fieldset>

    6. Informeer gebruikers over de voortgang

    				
					<div aria-label="Stap 2 van 4">Stap 2 van 4</div>

    7. Zorg voor flexibele invoer

    8. Test met hulpmiddelen en gebruikers

    				
					<label for="email">E-mailadres</label> 
<input type="email" id="email" name="email">
    voorbeeld om een label toe te voegen

    2. Bied veldinstructies en foutmeldingen

    				
					<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

    4. Zorg voor voldoende contrast en visuele feedback in het formulier

    5. Gebruik semantische HTML

    				
					<fieldset>
  <legend>Persoonlijke gegevens</legend>
  <label for="voornaam">Voornaam</label>
  <input type="text" id="voornaam" name="voornaam">
</fieldset>

    6. Informeer gebruikers over de voortgang

    				
					<div aria-label="Stap 2 van 4">Stap 2 van 4</div>

    7. Zorg voor flexibele invoer

    8. Test met hulpmiddelen en gebruikers

    deel dit artikel

    categorieën

    PROGRESSO

    Progresso helpt klanten met het design en bouw van nieuwe websites, webshops, campagnes en marketing concepten. 

    Wij werken op locatie bij de klant en vanuit onze eigen locatie in Doesburg en Amsterdam.

    Onze expertise omvat zowel techniek als design en content.

    WEBSITES 

    • Concepten
    • Webdesign
    • Teksten
    • SEO
    • Digitale toegankelijkheid
    • Website scan
    • Onderhoud website

    OVER ONS

    • Werkwijze
    • Onze klanten
    • Website scan
    • Offerte aanvragen
    • Blog

    CONTACT

    Progresso
    Ooipoortstraat 48
    Doesburg
    T: 06 1421 3336
    E: info@progresso.nl

    KvK: 34114506
    BTW nr: NL001601911B81

    2025 web development by Progresso
    privacy – algemene voorwaarden