HTMLhulp.nl logo
Hoe je formulieren toegankelijk maakt voor schermlezers

Hoe je formulieren toegankelijk maakt voor schermlezers

Hoe je formulieren toegankelijk maakt voor schermlezers

Formulieren zijn vaak cruciaal op een website: van inschrijvingen en bestellingen tot logins en contact. Voor gebruikers die een schermlezer gebruiken, kan een slecht opgebouwd formulier echter een groot obstakel vormen. Met de juiste HTML-technieken kun je formulieren volledig toegankelijk maken, zodat iedereen ermee kan werken. In dit artikel leer je hoe je stap voor stap formulieren optimaliseert voor schermlezers.

Waarom toegankelijke formulieren belangrijk zijn

  • Inclusiviteit: mensen met een visuele beperking kunnen je site gebruiken.

  • WCAG-richtlijnen: toegankelijkheid is wettelijk verplicht in steeds meer landen.

  • Betere gebruikerservaring: duidelijke formulieren helpen álle gebruikers.

  • Minder fouten: goede beschrijvingen en validatie zorgen dat data correct wordt ingevuld.

Labels correct koppelen

Elk invoerveld moet een zichtbaar of onzichtbaar label hebben dat gekoppeld is met het attribuut for.

<label for="email">E-mailadres</label>
<input type="email" id="email" name="email" required>

Een schermlezer leest dit als: “E-mailadres, invoerveld, verplicht.”

Placeholder ≠ label

Placeholders zijn extra hints, maar mogen nooit het label vervangen.

Fout:

<input type="text" placeholder="Naam">

Goed:

<label for="naam">Naam</label>
<input type="text" id="naam" placeholder="Voor- en achternaam">

Gebruik van fieldsets en legends

Groepeer gerelateerde velden met <fieldset> en geef een beschrijving met <legend>.

<fieldset>
<legend>Contactgegevens</legend>
<label for="telefoon">Telefoon</label>
<input type="tel" id="telefoon" name="telefoon">
</fieldset>

Een schermlezer leest dan eerst de context (“Contactgegevens”), waardoor de gebruiker beter begrijpt wat verwacht wordt.

Correct gebruik van input types

Gebruik specifieke input types zoals email, tel, date en number. Ze geven schermlezers en browsers extra context.

Voorbeeld:

<input type="date" name="geboortedatum" id="geboortedatum">

Schermlezers weten zo dat er een datum verwacht wordt.

Foutmeldingen en feedback koppelen

Gebruik aria-describedby om foutmeldingen of hulpteksten te koppelen aan een veld.

<label for="wachtwoord">Wachtwoord</label>
<input type="password" id="wachtwoord" aria-describedby="pw-help pw-error" required>
<small id="pw-help">Minimaal 8 tekens.</small>
<span id="pw-error" class="error">Dit veld is verplicht.</span>

Zo weet de schermlezer dat beide teksten relevant zijn voor dit veld.

Vereiste velden aangeven

Gebruik het attribuut required in plaats van een sterretje (*).

<input type="text" name="naam" id="naam" required>

Een schermlezer meldt dit als “verplicht invoerveld”.

Duidelijke knoppen

Gebruik duidelijke tekst op knoppen zoals “Verstuur formulier” of “Inloggen”. Vermijd vage teksten zoals “OK” of “Klik hier”.

<button type="submit">Verstuur formulier</button>

ARIA-rollen en -attributen

Soms zijn extra ARIA-attributen nodig:

  • aria-required="true" voor custom velden.

  • role="alert" voor foutmeldingen die direct moeten worden voorgelezen.

  • aria-invalid="true" om aan te geven dat de invoer niet klopt.

Voorbeeld:

<input type="email" id="email" aria-invalid="true" aria-describedby="email-error">
<span id="email-error" role="alert">Geen geldig e-mailadres</span>

Toetsenbordtoegankelijkheid

  • Alle velden moeten bereikbaar zijn met Tab.

  • Focus moet zichtbaar zijn met een duidelijke stijl:

input:focus, button:focus {
outline: 3px solid #00bf63;
outline-offset: 2px;
}

Visueel verbergen, maar niet voor schermlezers

Soms wil je een label verbergen maar wel toegankelijk houden. Gebruik daarvoor CSS, niet display: none.

.visually-hidden {
position: absolute;
left: -9999px;
}
<label for="zoeken" class="visually-hidden">Zoek op de site</label>
<input type="search" id="zoeken" placeholder="Zoeken...">

Dynamische formulieren en focus

Als er dynamisch een extra veld verschijnt (bijvoorbeeld bij keuze “Anders”), zorg dan dat de focus automatisch naar dit veld gaat.

document.getElementById("anders").addEventListener("change", function() {
document.getElementById("anders-veld").focus();
});

Veelgemaakte fouten bij formulieren

  1. Alleen placeholders gebruiken zonder labels.

  2. Geen foutmeldingen koppelen aan velden.

  3. Onlogische tabbalkvolgorde door verkeerde HTML-structuur.

  4. Knoppen zonder beschrijvende tekst.

  5. Velden verplicht maken zonder dit duidelijk te communiceren.

Tips voor toegankelijke formulieren

  • Zorg altijd voor labels en duidelijke instructies.

  • Gebruik fieldset en legend bij groepen.

  • Voeg ARIA-attributen toe waar nodig, maar vertrouw eerst op standaard HTML.

  • Test formulieren met een schermlezer zoals NVDA of VoiceOver.

  • Test ook met alleen toetsenbordnavigatie.

Met deze technieken maak je formulieren die voor iedereen bruikbaar zijn: snel, duidelijk en toegankelijk, ongeacht beperking of apparaat.