Hoe toegankelijk is AI en chattechnologie?

Geplaatst op door

Toegankelijke formulieren: praktische implementatie | wcagtool.nl

Toegankelijke formulieren praktisch toegepast

Formulieren zijn in vrijwel elke website of app essentieel, maar vormen tegelijk een van de grootste bron van WCAG-fouten: ontbrekende labels, onduidelijke foutberichten, slechte focusmanagement en ontoegankelijke validatie. Dit leidt tot hoge bounce, frustratie bij gebruikers en juridische risico’s.

Wij vertalen WCAG-vereisten naar direct toepasbare code, stap-voor-stap instructies en testbare patronen. Gebruik onze voorbeelden, test je site meteen met onze WCAG checker/validator of installeer de wcagtool plugin — vragen? Gebruik het contactformulier, we reageren binnen 24 uur.

Het probleem in de praktijk

Veelgemaakte fouten

  • Labels ontbreken of zijn alleen als placeholder aanwezig.
  • Foutmeldingen zijn visueel maar niet geassocieerd met velden via aria-describedby.
  • Focus blijft op het verkeerde element na validatie; screenreader-gebruikers missen foutinformatie.
  • ARIA verkeerd gebruikt (bijv. role=”alert” onnodig of aria-hidden op kritieke tekst).

Waarom dit gebruikers blokkeert

Gebruikers die blind of slechtziend zijn of toetsenbord-afhankelijk werken, hebben expliciete associaties, auditive aankondigingen en voorspelbaar focusgedrag nodig. Ontbrekende labels, onduidelijke foutmeldingen en gebrekkige keyboard-flow maken formulieren onbruikbaar.

Zo los je dit op in code

Basisstructuur: labels, ids en aria-describedby

Zorg altijd dat elk invoerveld een label heeft en dat foutberichten via aria-describedby gekoppeld zijn. Voorbeeld HTML (eerste invalidering):

<form id="signupForm" novalidate><div class="form-row"><label for="email">E-mailadres</label><input id="email" name="email" type="email" required aria-describedby="email-help email-error" /><div id="email-help" class="hint">We sturen een bevestiging naar dit adres.</div><div id="email-error" class="error" aria-live="polite" aria-atomic="true"></div></div></form>

Visueel verbergen voor niet-visuele gebruikers

Gebruik een ‘visually-hidden’ utility class zodat alleen schermlezers labels/extra uitleg horen:

.visually-hidden{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

Client-side validatie: set aria-invalid en update aria-describedby

Concrete JavaScript voor validatie, foutweergave en focus naar eerste fout:

function showErrors(errors){const form=document.getElementById('signupForm');let firstInvalid=null;Object.keys(errors).forEach(name=>{const field=form.querySelector('[name=\"'+name+'\"]');const errEl=document.getElementById(name+'-error');if(field){field.setAttribute('aria-invalid','true');errEl.textContent=errors[name];if(!firstInvalid) firstInvalid=field;} });if(firstInvalid){firstInvalid.focus();}}

Server-side errors toegankelijk tonen

Twee stappen: 1) toon een fout-summary bovenaan met link naar veld (use id and href), 2) zet focus op summary en plaats role=”alert” of aria-live op summary.

<div id="error-summary" class="error-summary" role="alert" tabindex="-1" aria-live="assertive"><h2>Er zijn problemen met uw invoer</h2><ul><li><a href=\"#email\">E-mailadres is ongeldig</a></li></ul></div>

Keep ARIA simple: prefer native HTML

Gebruik native <label>, <fieldset>/<legend>, <button> en <input>. Voeg ARIA alleen toe wanneer native elementen tekortschieten (bv. custom widgets).

Checklist voor developers

  • Elke input heeft een expliciet <label for=”id”> of aria-label/aria-labelledby wanneer visueel niet gewenst.
  • Placeholders nooit als vervanging voor labels.
  • Inline foutmeldingen hebben unieke ids en zijn gekoppeld met aria-describedby.
  • Zet aria-invalid=”true” op validerende velden.
  • Error summary met role=”alert” en focus toegankelijk maken.
  • Keyboard: tab-volgorde logisch, alle controls focusable (no tabindex>0).
  • Focus-visible: style focus states via :focus-visible en vermijd outline: none zonder alternatief.
  • Automatiseer checks met onze WCAG checker/validator en gebruik onze plugin tijdens development.

Tips voor designers en redacties

Schrijf heldere foutmeldingen

Gebruik korte, actiegerichte teksten: vermijd “ongeldig”, geef aan wat er fout is en hoe te herstellen. Voorbeeld: “Voer een geldig e‑mailadres in, bijvoorbeeld naam@voorbeeld.nl”.

Visuele feedback en hiërarchie

Zorg dat foutkleur en iconen voldoende contrast hebben (minimaal 4.5:1 voor tekst). Plaats het fout-summary bovenaan de pagina, zodat keyboard- en screenreadergebruikers het direct vinden.

Content-editors: gebruik CMS-velden correct

Vermijd placeholders als labels, lever duidelijke helpteksten aan development (bijv. character limits, validatiepatronen). Test content regelmatig met de WCAG checker.

Hoe test je dit?

Automatische checks

Draai direct onze WCAG checker/validator over pagina’s na implementatie. Gebruik de wcagtool plugin lokaal in de browser voor snelle feedback tijdens development.

Handmatige en screenreader tests

  1. Keyboard-only: tab door formulieren, activeer knoppen met Enter/Space, check dat focus naar fout-summary gaat bij fouten.
  2. Screenreader: test met NVDA/JAWS (Windows) en VoiceOver (macOS/iOS). Check dat foutmeldingen worden aangekondigd bij submit en dat aria-describedby wordt voorgelezen.
  3. Mobile: test op touch en met schermlezers (TalkBack/VoiceOver) en controleer dat focus en foutmeldingen correct werken.

Concrete teststappen

1) Verwijder e-mail input of voer ongeldige e-mail in en submit.
2) Controleer: fout-summary verschijnt, focus gaat naar summary, foutbericht gekoppeld aan input wordt aangekondigd, field heeft aria-invalid=”true”.
3) Corrigeer invoer, submit opnieuw: error verdwijnt, aria-invalid verwijderd, en focus keert naar next logical element.

Voer deze test zowel client-side als na server-side validatie uit. Test direct met onze online validator en rapporteer onduidelijkheden via het contactformulier — antwoord binnen 24 uur.

Laatste praktische tip

Gebruik dit korte, kopieer‑plakbaar script om bij submit automatisch naar het eerste invalide veld te focussen en foutberichten toegankelijk te maken:

document.getElementById('signupForm').addEventListener('submit',function(e){e.preventDefault();const form=this;const errors={};const email=form.querySelector('[name=\"email\"]').value;if(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)){errors.email='Voer een geldig e-mailadres in.';}if(Object.keys(errors).length){Object.keys(errors).forEach(name=>{const field=form.querySelector('[name=\"'+name+'\"]');const errEl=document.getElementById(name+'-error');field.setAttribute('aria-invalid','true');errEl.textContent=errors[name];});const first=form.querySelector('[aria-invalid=\"true\"]');first.focus();document.getElementById('error-summary')?.focus();return;} // bij succes: verstuur form of AJAX call here });

Test je implementatie meteen met onze WCAG checker/validator, installeer de plugin voor real-time feedback en stuur ons een vraag via contact — we reageren binnen 24 uur.