Praktische WCAG-implementatie — wcagtool.nl

Praktische WCAG-implementatie: direct toepasbare stappen voor developers, designers en redacties

WCAG-implementatie faalt vaak niet door onwil, maar door ontbrekende concrete stappen: verkeerde semantics, onvolledige ARIA, slechte focus-styling en ongeteste foutafhandeling. Dat leidt tot componenten die visueel kloppen maar niet toegankelijk zijn voor toetsenbord- of screenreadergebruikers.

Wij lossen dit op door concrete code-voorbeelden, stap-voor-stap testinstructies en checklists die je direct in je project kunt plakken. Test je site daarna meteen met onze WCAG checker/validator, download onze plugin voor CI-integratie en stuur vragen via ons contactformulier (antwoord binnen 24 uur).

Het probleem in de praktijk

In projecten zie je consistent dezelfde foutpatronen: verkeerde elementkeuze (divs i.p.v. buttons/links), ontbrekende focusindicatoren, formulieren zonder expliciete labels of fouttekst die niet ARIA-live announced, en contrastproblemen die niet automatisch getest worden.

Veelvoorkomende fouten

Interactieve controls niet semantisch (role misbruik).
Keyboard focus niet zichtbaar of niet logisch (tabindex misbruik).
Formuliervalidatie zonder duidelijke aria-attributes of inline foutmeldingen.
Onvoldoende kleurcontrast en niet-toegankelijke iconen zonder tekstalternatief.

Zo los je dit op in code

Onderstaande fragmenten zijn direct inzetbaar. Gebruik ze als basis en pas waar nodig aan je component library aan. Elk fragment bevat ook test-stappen.

Semantische knoppen en links

<!-- Gebruik het juiste element: button voor acties, a voor navigatie --><br><button type="button" onclick="handleSave()">Opslaan</button><br><a href="/download" class="link">Downloaden</a>

Keyboard en focus-styling (CSS)

/* Duidelijke focus-staat, geen outline: gebruik box-shadow of border */<br>.focus-visible:focus { outline: none; box-shadow: 0 0 0 3px #ffd54f; }<br>/* Gebruik :focus-visible waar mogelijk */<br>button:focus-visible, a:focus-visible { box-shadow: 0 0 0 3px rgba(21,156,228,0.6); }

Skiplink (direct inzetbaar)

<a href="#maincontent" class="skip-link">Sla navigatie over</a><br>/* CSS: maak zichtbaar bij focus */<br>.skip-link { position: absolute; left: -999px; top: auto; width: 1px; height: 1px; overflow: hidden; }<br>.skip-link:focus { position: static; width: auto; height: auto; left: 0; background: #fff; padding: 8px; z-index: 1000; }

Toegankelijke formulieren met ARIA en foutafhandeling

<form id="contactForm" novalidate aria-describedby="form-errors"><br>  <label for="name">Naam</label><br>  <input id="name" name="name" type="text" required aria-required="true" /><br>  <div id="name-error" class="error" aria-live="polite" aria-atomic="true"></div><br>  <button type="submit">Verstuur</button><br>  <div id="form-errors" class="visually-hidden" aria-live="assertive"></div><br></form>

// JavaScript: validate en focus naar eerste fout<br>document.getElementById('contactForm').addEventListener('submit', function(e){<br>  e.preventDefault();<br>  var name = document.getElementById('name');<br>  var err = document.getElementById('name-error');<br>  var formErrors = document.getElementById('form-errors');<br>  if(!name.value.trim()){<br>    err.textContent = 'Voer uw naam in.';<br>    name.setAttribute('aria-invalid','true');<br>    name.focus();<br>    formErrors.textContent = 'Er zijn fouten in het formulier.';<br>    return;<br>  }<br>  // verzend formulier...

Accessible custom components: example dropdown

<!-- Minimal ARIA pattern voor custom dropdown --><br><div class="dropdown" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-owns="dd-list" tabindex="0"><br>  <span class="selected">Kies optie</span><br>  <ul id="dd-list" role="listbox" tabindex="-1" hidden><br>    <li role="option" data-value="1">Optie 1</li><br>    <li role="option" data-value="2">Optie 2</li><br>  </ul><br></div>

Contrast en iconen

/* Zorg voor contrast >= 4.5:1 voor body text */<br>.text { color: #1a1a1a; background: #ffffff; }<br>/* Voor iconen: gebruik aria-hidden="false" met title of voeg sr-only label toe */<br><span class="icon" role="img" aria-label="Zoeken">🔍</span>

Checklist voor developers

Gebruik deze checklist per component of pagina. Loop elk punt af en vink af in je PR-template.

Gebruik semantische HTML (button, a, form, nav, main, header, footer).
Alle interactieve elementen zijn focusbaar en hebben zichtbare focus-states.
Formulieren hebben gelabelde inputs, aria-invalid en aria-describedby voor foutteksten.
Custom widgets implementeren ARIA patterns (combobox, listbox, menu) en keyboard-handling (Arrow keys, Enter, Escape).
Contrast getest >= 4.5:1 (tekst) en 3:1 voor grote tekst/iconen.
Skiplinks en skip targets (id maincontent) aanwezig.
Dynamic content gebruikt aria-live en role=\”status\” waar nodig.
Alle afbeeldingen hebben alt-teksten; decoratieve afbeeldingen alt=\”\”.
Controleer tabindex: geen positieve tabindex gebruik in productie.

PR-template snippet

Accessibility checklist:<br>[ ] Semantische elementen gebruikt<br>[ ] Focus-states zichtbaar<br>[ ] Labels en aria-describedby voor errors<br>[ ] Keyboard navigation getest<br>[ ] Contrast gecontroleerd met https://wcagtool.nl/checker

Tips voor designers en redacties

Designers: definieer duidelijke focus-states in het design system, lever kleurpaletten met contrastcijfers en lever icon-sets met tekstalternatieven. Redacties: schrijf heldere linkteksten, geef context en gebruik korte, betekenisvolle foutmeldingen.

Design tokens voorbeeld

/* Tokens voor focus en contrast */<br>--color-primary: #156ce8;<br>--focus-ring: 0 0 0 3px rgba(21,108,232,0.35);<br>--text: #111827;/* test: contrast 21% op #fff = 15:1 */

Content-richtlijnen voor redacties

Linktekst beschrijft bestemming: niet alleen “klik hier”.
Foutmeldingen benoemen het probleem en de oplossing: “Voer uw e-mailadres in” i.p.v. “Fout”.
Gebruik korte zinnen en duidelijke koppen; dit helpt alle gebruikers, niet alleen screenreaders.

Hoe test je dit?

Testen is essentieel. Combineer geautomatiseerde tools met handmatige checks en screenreader-tests. Gebruik onze WCAG checker/validator voor snelle scans en installeer de plugin in je CI-pipeline om regressies te voorkomen.

Snelle teststappen per feature

Keyboard only: navigeer via Tab/Shift+Tab, activeer items met Enter/Space, sluit modals met Escape. Noteer onlogische focusvolgorde.
Screenreader: JAWS/NVDA/VoiceOver — lees interactieve elementen via rotor en announce van aria-live. Controleer dat labels en foutmeldingen worden aangekondigd.
Contrast: voer kritieke pagina’s door onze checker en corrigeer kleuren die onder 4.5:1 vallen.
Formulieren: verwijder JavaScript en test native validation; test met en zonder JS; controleer aria-invalid en focus naar eerste fout.

Automatische testvoorbeelden (axe-core)

// npm install axe-core puppeteer --save-dev<br>const puppeteer = require('puppeteer');<br>const AxePuppeteer = require('axe-core');<br>// In je test: laad pagina, inject axe en run scan. Gebruik onze plugin voor preset checks.

Concrete test-scripts

// voorbeeld Cypress test snippet<br>describe('Accessibility', () => {<br>  it('check accessibility on homepage', () => {<br>    cy.visit('/');<br>    cy.injectAxe();<br>    cy.checkA11y(null, null, terminalLog);<br>  });<br>});

Na deze tests: fix issues en her-run. Integreer tests in CI met onze plugin zodat elke PR automatisch gemonitord wordt.

Laatste praktische tip

Voeg direct bij je base layout deze snippet toe om skiplinks en focus-styling standaard te hebben, en test direct met onze checker:

<!-- Plaats in <body> van je base template --><br><a href="#maincontent" class="skip-link">Sla navigatie over</a><br><style>.skip-link{position:absolute;left:-999px}.skip-link:focus{position:static;left:auto;background:#fff;padding:8px;z-index:10000}.focus-visible:focus{outline:none;box-shadow:0 0 0 3px rgba(21,156,228,0.6)}</style>

Test je site direct met onze WCAG checker, download de plugin voor CI en stuur je vragen via ons contactformulier — we reageren binnen 24 uur.