Mobiele toegankelijkheid: richtlijnen en praktijk

Geplaatst op door

Praktische WCAG-implementatie: direct toepasbare stappen voor developers | WCAGTool

WCAG praktisch toepassen: concrete stappen en code die werkt

Veel toegankelijkheidsproblemen ontstaan niet door onwil maar door onduidelijke prioriteiten en ontbrekende, testbare implementatiestappen. Elementen ontbreken semantiek, formulierelementen zijn onvoldoende gelabeld en dynamische content verliest focus — dat zijn de fouten die we iedere dag tegenkomen.

Wij lossen dit door heldere, stap-voor-stap implementaties te leveren met direct inzetbare HTML/CSS/JS-snippets, checklists en testinstructies. Gebruik onze WCAG checker om je implementatie direct te valideren, download onze plugin voor integratie in je CI-pipeline of vraag ons om hulp via ons contactformulier (reactie binnen 24 uur).

Het probleem in de praktijk

Veelvoorkomende fouten

  • Ontbrekende of verkeerde labels voor formulierelementen (voor, aria-label, aria-labelledby)
  • Geen skip-links of slechte focusvolgorde na dynamische updates
  • Kleurcontrast voldoet niet en is niet getest met gekleurde overlays
  • Onjuist gebruik van ARIA: overbodige roles, foute aria-live instellingen
  • Modals en dialogs vangen focus niet juist, keyboard traps

Waarom automatische tools alleen niet genoeg

Automatische validators vangen structurele fouten, maar missen praktijkproblemen: logische focusvolgorde, begrijpelijkheid van foutmeldingen, contextuele alt-teksten en content-UX. Combineer onze WCAG checker/validator met de handmatige tests in dit artikel.

Zo los je dit op in code

1) Basis: semantische HTML en landmarks

Stap 1: gebruik correcte tags en landmarks. Dit zorgt voor voorspelbare navigatie met screenreaders en toetsenbord.

<header role="banner">
  <nav role="navigation">...</nav>
</header>
<main role="main">...</main>
<footer role="contentinfo">...</footer>

2) Skip-link en zichtbare focus

Voeg een skip-link toe en zorg dat focus zichtbaar en duidelijk is:

<a class="skip-link" href="#main-content">Sla navigatie over</a>
<style>.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}.skip-link:focus{position:static;width:auto;height:auto;left:auto;padding:8px;background:#000;color:#fff;z-index:9999}</style>

3) Toegankelijke forms: labels, fouten en aria

Allereerst: elk input-element moet label of aria-label hebben. Toon foutberichten inline en koppel ze via aria-describedby.

<label for="email">E-mail</label>
<input id="email" name="email" type="email" aria-describedby="email-error" required />
<div id="email-error" role="alert" aria-live="assertive" hidden><!-- dynamisch vullen --></div>

JavaScript-check: zet error-element zichtbaar en focus op het foutveld:

function showError(input, message){const err=document.getElementById(input.id+'-error');err.textContent=message;err.hidden=false;input.setAttribute('aria-invalid','true');input.focus();}

4) Accessible modals en focus management

Modals moeten aria-modal, role=dialog en focus-trapping hebben. Zet inert/aria-hidden op achtergrond of beheer tabindex.

<div id="modal" role="dialog" aria-modal="true" aria-labelledby="modal-title" hidden>
  <h2 id="modal-title">Instellingen</h2>...</div>
/* Simplified focus trap */
function openModal(){const firstFocusable=modal.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');firstFocusable.focus();document.body.setAttribute('aria-hidden','true');modal.hidden=false;}function closeModal(){modal.hidden=true;document.body.removeAttribute('aria-hidden');}

5) Dynamische updates: aria-live en role=status

Gebruik aria-live voor tijdelijke meldingen en role=status voor informatieve updates zonder assertive onderbrekingen.

<div id="toast" role="status" aria-live="polite"></div>
function showToast(text){const t=document.getElementById('toast');t.textContent=text;}

6) Kleurcontrast en scalable UI

Gebruik CSS-variabelen en test contrast programatisch in build pipeline. Basistest via JS:

function contrastRatio(hex1,hex2){/* implementatie: bereken luminantie en ratio */} /* Run in CI en breek build als ratio < 4.5 voor body tekst */

7) Afbeeldingen en alternatieve teksten

Alt-tekst moet context bieden. Decorative images met empty alt of role=presentation.

<img src="logo.svg" alt="Bedrijfsnaam logo" /> <!-- content -->
<img src="decoratie.png" alt="" role="presentation" /> <!-- decoratief -->

Checklist voor developers

  • Gebruik semantische HTML en correcte landmarks
  • Alle inputs: label of aria-label + aria-describedby voor fouten
  • Skip-link aanwezig en focus zichtbaar
  • Focus management bij modals en dynamische content
  • Keyboard-navigatie: alle interactieve elementen focusable zonder mouse-only handlers
  • Kleurcontrast minimaal 4.5:1 (14px normaal tekst) en 3:1 voor grote tekst
  • Alt-teksten en aria-hidden voor decoratie
  • Geen misbruik van ARIA: gebruik ARIA als aanvulling op, niet als vervanging van, semantische HTML
  • Automatische tests in CI met onze WCAG checker/validator en visuele regression

Tips voor designers en redacties

Design-systeem: toegankelijkheid als onderdeel van componenten

Documenteer focus-states, color tokens met contrastwaarden en component-voorbeelden met screenreader-teksten.

Content-editing: alt-teksten en begrijpelijke labels

Voor redacties: bied een korte handleiding in CMS met voorbeelden: ‘Kort, specifiek, context’ voor alt-teksten. Verplicht veld voor alt bij upload van images, of checkbox ‘decoratief’.

Voorbeeldbriefing voor redacteurs

  • Alt-tekst template: Wat is het? + waarom? + actie (indien relevant)
  • Titels: gebruik H1 alleen 1x per pagina
  • Link-tekst: vermijd ‘klik hier’, geef context

Hoe test je dit?

1) Handmatige toetsenbordtests

  1. Navigeer via Tab/Shift+Tab: alle interactieve elementen zijn bereikbaar en hebben focus-ring
  2. Activeer componenten met Enter/Space en annuleer met Esc (voor modals en dropdowns)
  3. Controleer focusvolgorde: logische volgorde, geen onverwachte jumps

2) Screenreader-checks (NVDA/VoiceOver)

  • NVDA Windows: schakel NVDA aan en navigeer met R voor regions, H voor headings. Controleer of labels en waarden voor form elementen correct worden voorgelezen.
  • VoiceOver Mac: controleer rotor (landmarks, headings) en lees order bij dynamische updates.

3) Automatische tools en CI

Draai onze WCAG checker/validator lokaal en in CI. Gebruik de plugin voor GitHub/GitLab om regressies te blokkeren. Link: WCAG checker/validator en download de plugin: WCAGTool plugin.

4) Testcases en voorbeelden

Maak voor elke component een testmatrix: keyboard, screenreader, contrast, responsive. Voeg deze tests toe aan pull request checklist en run onze checker automatisch.

Concrete mini-how-to’s

Keyboard-accessible custom button

<div role="button" tabindex="0" onclick="doAction()" onkeydown="if(event.key==='Enter'||event.key===' ')doAction();">Optie</div>

Accessible table with caption

<table>
  <caption>Verkoop per kwartaal</caption>
  <thead><tr><th>Kwartaal</th><th>Omzet</th></tr></thead>
  <tbody>...</tbody>
</table>

Maak foutmeldingen focusbaar en voorlezen

/* HTML */
<div id="form-error" role="alert" aria-live="assertive" tabindex="-1" hidden></div>
/* JS */
function showFormError(msg){const el=document.getElementById('form-error');el.textContent=msg;el.hidden=false;el.focus();}

Checklist voor developers (printable)

  1. Semantische HTML: landmarks en headings correct
  2. Alle inputs: label + aria-describedby voor errors
  3. Skip-link en zichtbare focus
  4. Keyboard-only bediening mogelijk
  5. Modals focus trap & aria-modal
  6. aria-live voor dynamische feedback
  7. Contrast minimaal 4.5:1
  8. Alt-tekst policy voor redacties
  9. Gebruik onze WCAG checker/validator in CI

Hoe wij kunnen helpen

Gebruik onze WCAG checker/validator om direct inzicht te krijgen. Download onze integratieplugin voor automatische checks bij pull requests: WCAGTool plugin. Voor concrete vragen: vul ons contactformulier — we beantwoorden binnen 24 uur.

Wil je direct testen? Start met onze validator en plak je URL: Test nu je site. Voor implementatiehulp sturen we korte, concrete code-snippets en PR-comments via de plugin.

Praktische tip (direct toepasbaar): voeg deze kleine utility toe in je project om focus-outline consistent te maken en alleen te tonen bij keyboard-navigatie.

/* Add to global CSS */
:focus{outline:none}
body.keyboard-navigation :focus{outline:3px solid #ffbf47;outline-offset:2px}
/* Toggle class via JS */
function enableKeyboardNav(){document.body.classList.add('keyboard-navigation')}function disableKeyboardNav(){document.body.classList.remove('keyboard-navigation')}window.addEventListener('keydown',enableKeyboardNav);window.addEventListener('mousedown',disableKeyboardNav);