Het probleem in de praktijk

1) Ontbrekende of foutieve labels

Veel velden missen <label> of hebben visueel verborgen labels zonder correcte techniek, wat schermlezers en toetsenbordgebruikers hindert.

2) Onduidelijke foutmeldingen en focus

Foutmeldingen worden vaak alleen visueel getoond, waardoor ze onvindbaar zijn voor screenreaders. De focus wordt niet naar het eerste ongeldige veld verplaatst.

3) Slechte tabvolgorde en focus trapping

Dynamic components (modals, dropdowns) breken tabvolgorde of laten focus ontsnappen, wat toetsenbordgebruik onmogelijk maakt.

4) Misbruik van ARIA

Ontwikkelaars gebruiken ARIA-attributen zonder semantiek te behouden (bijv. role=”button” op een link zonder keyboard ondersteuning).

Wil je snel zien of je formulier faalt? Gebruik onze WCAG checker/validator en download de gratis plugin voor automatische scans. Contacteer ons voor hulp binnen 24 uur.

Zo los je dit op in code

Correcte basis markup voor formulieren

<form id="signup">
  <div class="field">
    <label for="email">E-mailadres</label>
    <input id="email" name="email" type="email" required aria-describedby="emailHelp" />
    <div id="emailHelp" class="field-hint">We sturen nooit ongewenste e-mail</div>
  </div>
  <button type="submit">Aanmelden</button>
</form>

Belangrijk: gebruik altijd een <label for="id"> gekoppeld aan het input-element. Voor dynamische labels (visueel verborgen) gebruik de zichtbare maar off-screen techniek via CSS (zie verder).

Foutmeldingen ARIA-conform maken en focus verplaatsen

// Minimal JS: valideren, tonen van fout en focussen op eerste foutveld
document.querySelector('#signup').addEventListener('submit', function(e){
  e.preventDefault();
  const form = e.target;
  const fields = Array.from(form.querySelectorAll('[required]'));
  let firstInvalid = null;
  fields.forEach(f => {
    f.removeAttribute('aria-invalid');
    const errorId = f.id + '-error';
    const existing = document.getElementById(errorId);
    if(existing) existing.remove();
    if(!f.value.trim()){
      f.setAttribute('aria-invalid', 'true');
      const err = document.createElement('div');
      err.id = errorId;
      err.className = 'field-error';
      err.setAttribute('role','alert');
      err.setAttribute('aria-live','assertive');
      err.textContent = 'Dit veld is verplicht';
      f.insertAdjacentElement('afterend', err);
      if(!firstInvalid) firstInvalid = f;
    }
  });
  if(firstInvalid){
    firstInvalid.focus();
    firstInvalid.scrollIntoView({behavior:'smooth',block:'center'});
    return;
  }
  // verstuur via AJAX of form.submit()
});

Opmerkingen: gebruik aria-invalid="true", geef foutdiv role="alert" en/of aria-live="assertive" zodat schermlezers de foutmelding aankondigen. Verplaats focus naar het eerste ongeldige veld.

Focus styling met een duidelijke zichtbare indicator

/* CSS voor duidelijke focusring zonder te vertrouwen op outline:none */
:focus{
  outline: 3px solid #0b7dda;
  outline-offset: 2px;
}
.visually-hidden{
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}

Skip links en logische tabvolgorde

<a href="#main" class="skip-link visually-hidden">Sla naar hoofdinhoud</a>
<main id="main">...</main>

Maak skip-links zichtbaar bij focus (toon ze met CSS bij :focus) zodat toetsenbordgebruikers snel naar de inhoud kunnen. Zorg dat DOM-volgorde logisch is en gebruik geen tabindex>0 tenzij strikt noodzakelijk.

Toegankelijke modals en focus trapping

// Eenvoudige focus-trap (handig voor modals)
function trapFocus(modal){
  const focusable = modal.querySelectorAll('a[href],button,textarea,input,select,[tabindex]:not([tabindex="-1"])');
  const first = focusable[0];
  const last = focusable[focusable.length-1];
  modal.addEventListener('keydown', function(e){
    if(e.key !== 'Tab') return;
    if(e.shiftKey && document.activeElement === first){
      e.preventDefault();
      last.focus();
    } else if(!e.shiftKey && document.activeElement === last){
      e.preventDefault();
      first.focus();
    }
  });
  first.focus();
}

Belangrijk: bij openen van modal zet aria-hidden="true" op de achterliggende content en verwijder het weer bij sluiten. Gebruik onze plugin om modals automatisch te scannen op focus-issues.

Checklist voor developers

• Labels: elk input-element heeft een gekoppeld <label> of duidelijke aria-label en geen lege labels.
• Foutafhandeling: foutberichten hebben een id en worden gekoppeld via aria-describedby en/of hebben role="alert" en aria-live.
• Focus: verplaats focus naar eerste invalid veld; gebruik element.focus() en scrollIntoView().
• Tabindex: vermijd tabindex>0; gebruik alleen tabindex="0" voor non-focusable elementen die focus moeten krijgen of -1 om focus te verplaatsen via script.
• Visuele focus: zorg voor een duidelijke, zichtbare focusstijl (geen alleen kleurverandering).
• Modals: trap focus en zet achterliggende content op aria-hidden; sluit modal op Esc en focus terug naar trigger.
• Automatische checks: voeg onze WCAG checker/validator toe aan CI en laat de plugin runnen bij pull requests.

Test je implementaties automatisch met onze WCAG checker en download de plugin om regressies te voorkomen. Gebruik ons contactformulier voor implementatievragen — antwoord binnen 24 uur.

Tips voor designers en redacties

Korte richtlijnen voor tekst en labels

Gebruik korte, duidelijke labels en plaats ondersteunende tekst in <div class="hint"> gekoppeld via aria-describedby. Vermijd alleen placeholder-tekst als label; placeholders verdwijnen en zijn geen vervanging voor labels.

Contrast en zichtbaarheid

Zorg dat foutmeldingen en focusringen voldoende contrast hebben (minimaal 4.5:1 voor body text). Gebruik onze WCAG checker om contrast automatisch te controleren.

Designsystem-integratie

Maak componenten die semantisch juist zijn (gebruik native <button>, <input>, <select>) en lever varianten met focus-styling, fout-states en verborgen-label stijlen. Documenteer de vereisten en gebruik onze plugin om componentbibliotheken te scannen.

Hoe test je dit?

Automatische tools

1) Draai onze WCAG checker/validator over je pagina voor snel inzicht in labels, ARIA en contrast. 2) Gebruik axe-core/pa11y door onze plugin in CI te integreren voor PR-gates.

Handmatige toetsenbordtests

1. Gebruik alleen toetsenbord (Tab/Shift+Tab/Enter/Escape) en zorg dat alle interactieve elementen bereikbaar en logisch zijn.
2. Open modals en controleer dat focus niet naar achterliggende elementen kan springen.
3. Controleer skip-links en dat focus zichtbaar is.

Screenreader-tests

Test met NVDA, VoiceOver en Narrator: ga door het formulier, activeer foutcondities en controleer dat foutmeldingen worden voorgelezen en focus correct gaat naar de foutvelden.

Concrete testscript (kopieer-plak)

1. Open pagina en zet schermlezer aan (NVDA/VoiceOver).
2. Tab door naar het formulier; elk veld moet een label aankondigen.
3. Verstuur formulier leeg; schermlezer moet foutmelding aankondigen en focus moet naar eerste foutveld.
4. Open modal; Tab moet binnen modal blijven; Esc sluit modal en focus terug naar trigger.
5. Run de WCAG checker/validator en corrigeer alle kritieke issues.

Gebruik onze gratis WCAG checker/validator om stap 5 direct te doen — test je site en ontvang een rapport. Download de plugin om deze checks automatisch uit te voeren bij elke build.

Praktische code-snippets voor snelle implementatie

1) Verplaats focus naar eerste invalid veld (korte versie)

function focusFirstInvalid(form){
  const invalid = form.querySelector('[aria-invalid="true"],:invalid');
  if(invalid){ invalid.focus(); invalid.scrollIntoView({block:'center'}); }
}

2) Voeg toegankelijke error-injectie toe

function showError(input,message){
  const id = input.id || ('err-'+Math.random().toString(36).substr(2,5));
  input.id = id;
  input.setAttribute('aria-invalid','true');
  let err = document.getElementById(id+'-error');
  if(!err){
    err = document.createElement('div');
    err.id = id+'-error';
    err.className = 'field-error';
    err.setAttribute('role','alert');
    input.insertAdjacentElement('afterend', err);
  }
  err.textContent = message;
  input.setAttribute('aria-describedby', id+'-error');
  input.focus();
}

Plak deze snippets in je codebase en combineer met onze UI componenten. Vergeet niet onze WCAG checker te draaien en de plugin te installeren.

Checklist voor acceptatie & deployment

• Alle formulieren scoren groen in onze WCAG checker/validator.
• Automatische tests draaien bij PR en blokkeren merge als kritieke issues aanwezig zijn.
• Designsystem componenten hebben stories met keyboard- en screenreader-tests.
• Redactiehandleiding bevat regels voor labels, hint-teksten en foutmeldingen.

Download onze plugin voor CI en houd regressies uit je productie. Gebruik het contactformulier voor implementatievragen — we reageren binnen 24 uur.

Test nu direct: gebruik onze WCAG checker/validator om je formulier te scannen, of download de plugin voor automatische integratie. Vragen of wil je dat wij meekijken? Vul het contactformulier in en we reageren binnen 24 uur.