Screenreader-testen: NVDA, JAWS en VoiceOver gids
Toegankelijke formulieren: labels, foutafhandeling en focusmanagement
Formulieren falen in de praktijk vaak op dezelfde punten: ontbrekende of onduidelijke labels, foutmeldingen die niet door schermlezers worden aangekondigd, en slecht keyboard-focusbeheer. Dat leidt tot onnodige barrières voor mensen met een beperking en tot hogere foutmarges en afhakers.
Wij helpen teams direct toepasbare oplossingen te implementeren: concrete HTML/ARIA/CSS/JS-snippets, testinstructies en checklists die je meteen in je codebase kunt plakken. Test je pagina daarna direct met onze WCAG checker/validator, installeer onze plugin voor CI-integratie en stel je vraag via het contactformulier (antwoord binnen 24 uur).
Het probleem in de praktijk
Veelvoorkomende fouten
- Labels ontbreken of worden vervangen door placeholders.
- Foutmeldingen zijn visueel maar niet toegankelijk via aria-live/role=alert.
- Focus blijft op het formulier na submit of springt niet naar het eerste foutveld.
- aria-invalid en aria-describedby worden niet consistent gebruikt.
Waarom dat echt pijn geeft
Gebruikers die alleen toetsenbord of schermlezers gebruiken missen context: welk veld is fout, wat moet ik corrigeren en waar bevindt de foutmelding zich? Dat zorgt voor mislukte verzendingen en frustratie.
Zo los je dit op in code
1) Zorg voor semantische labels
Altijd een <label> koppelen met een id via for. Gebruik geen placeholder als vervanging.
<label for="email">E-mailadres</label><input id="email" name="email" type="email" required aria-describedby="email-help email-error"><small id="email-help">We gebruiken je e-mail alleen voor contact.</small><div id="email-error" class="error" aria-live="polite"></div>2) Geef fouten machineleesbaar weer
Gebruik aria-live of role=”alert” voor dynamische foutmeldingen en aria-describedby om de foutmelding aan het veld te koppelen.
<input id="postcode" name="postcode" aria-describedby="postcode-error"><div id="postcode-error" role="alert">Voer een geldige postcode in.</div>3) Focus management — focus het eerste foutveld
Na validatie: focus en scroll naar het eerst ongeldige veld en zet aria-invalid=”true”.
function focusFirstInvalid(form){const invalid = form.querySelector('[aria-invalid="true"], .is-invalid, :invalid');if(invalid){invalid.focus();invalid.scrollIntoView({behavior:'smooth',block:'center'});const id = invalid.id||'focus-'+Date.now();if(!invalid.id) invalid.id=id;const live = document.getElementById(id+'-error');if(live){live.setAttribute('tabindex','-1');live.focus();}}}4) Voorbeeld: client-side validatie met duidelijke ARIA-updates
form.addEventListener('submit', function(e){e.preventDefault();clearErrors(form);const fields = Array.from(form.elements).filter(f=>f.willValidate);let firstInvalid=null;fields.forEach(f => {if(!f.checkValidity()){f.setAttribute('aria-invalid','true');const err = document.getElementById(f.id+'-error');if(err) err.textContent = f.validationMessage; if(!firstInvalid) firstInvalid=f;}});if(firstInvalid){firstInvalid.focus();firstInvalid.scrollIntoView({behavior:'smooth',block:'center'});}else{form.submit();}});5) Style voor zichtbare focus (CSS)
:focus{outline:3px solid #005a9c;outline-offset:2px;}button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px rgba(0,90,156,0.15);}Checklist voor developers
- Elke form control heeft een <label for=”…”></label> of aria-label/aria-labelledby als zichtbare labeltracking niet mogelijk is.
- Foutmeldingen hebben een id en worden gekoppeld met aria-describedby.
- Dynamische foutmeldingen gebruiken aria-live=”polite” of role=”alert”.
- Na submit wordt focus verplaatst naar het eerste foutveld (of foutsamenvatting) en is deze focus zichtbaar.
- Gebruik aria-invalid=”true” op ongeldige velden en verwijder het attribuut wanneer het veld geldig is.
- Test met toetsenbord, NVDA/VoiceOver en onze validator.
Tips voor designers en redacties
Gebruik geen placeholder als label
Placeholders verdwijnen zodra de gebruiker begint te typen en bieden geen blijvende context. Gebruik altijd een visueel label of een compacte label-variant.
Schrijf foutmeldingen die actiegericht en kort zijn
- Goed: “Vul een geldig e-mailadres in.” (kort, actiegericht)
- Fout: “E-mail ongeldig.” (onduidelijk)
Visuals en contrast
Zorg dat foutkleur en focusring voldoen aan contrastregels (4.5:1 of 3:1 afhankelijk van tekstgrootte). Gebruik onze checker voor contrastchecks.
Hoe test je dit?
Handmatige stappen (snel)
- Open de pagina en navigeer alleen met Tab; controleer dat alle velden focusbaar en logisch in volgorde zijn.
- Laat het formulier leeg en submit; verwacht: focus naar eerste foutveld, foutmelding zichtbaar en voorlezen door schermlezer.
- Repareer het veld en controleer dat aria-invalid verdwijnt en de foutmelding verdwijnt of geüpdatet wordt.
Automated checks
Run onze WCAG checker/validator voor snel inzicht in ontbrekende labels, aria-describedby verwijzingen en contrastproblemen. Installeer de plugin voor CI zodat regressies direct op PR-niveau falen.
Screenreader-test
Met NVDA (Windows) of VoiceOver (macOS/iOS): navigeer naar het formulier, voer een ongeldige waarde in, submit en luister of de foutmelding wordt aangekondigd. Als niet: controleer aria-live/role=alert en aria-describedby.
Snelle console-test (kopieer-plak)
/* Zet het eerste inputveld als ongeldig en focus het */const f=document.querySelector('form');const first=document.querySelector('input,select,textarea');first.setAttribute('aria-invalid','true');const err=document.getElementById(first.id+'-error');if(err) err.textContent='Test foutmelding';first.focus();Laatste praktische tip
Voeg een paginawijde foutsamenvatting toe bovenaan het formulier met een link naar elk foutveld (href=”#veld-id”) en zet role=”alert” op de samenvatting zodat gebruikers direct weten wat te corrigeren. Test dit meteen met onze WCAG checker, download de plugin voor automatische scans en stuur vragen via het contactformulier — we reageren binnen 24 uur.