Webtoegankelijkheid betekent het bouwen van websites die mensen met een handicap effectief kunnen gebruiken. Dit omvat mensen die schermlezers, alleen toetsenbordnavigatie, spraakbesturing, schermvergroters gebruiken, of die beperkingen in kleurzicht hebben. In het WordPress-ecosysteem is toegankelijkheid zowel een wettelijke vereiste in veel rechtsgebieden als een praktische manier om een breder publiek te bereiken—meer dan 1 miljard mensen wereldwijd heeft een of andere vorm van handicap.
In deze gids behandelen we praktische stappen om uw WordPress-site toegankelijk te maken, volgens de Web Content Accessibility Guidelines (WCAG) 2.2 op het AA-niveau—de standaard die het meest wordt vereist door toegankelijkheidswetten, waaronder de ADA (VS), EAA (EU) en AODA (Canada).
Begrijpen van de WCAG 2.2 Principes
WCAG is georganiseerd rond vier principes, bekend als POUR:
| Principe | Wat Het Betekent | WordPress Voorbeelden |
|---|---|---|
| Waarneembaar | Gebruikers kunnen de inhoud waarnemen via zicht, gehoor of aanraking | Alt-tekst voor afbeeldingen, bijschriften voor video's, voldoende kleurcontrast |
| Bedienbaar | Gebruikers kunnen navigeren en interactie hebben met de interface | Toetsenbordnavigatie, overslaan van links, geen toetsenbordvallen |
| Begrijpelijk | Gebruikers kunnen de inhoud begrijpen en hoe ze de interface moeten gebruiken | Duidelijke taal, consistente navigatie, foutmeldingen |
| Robuust | Inhoud werkt op verschillende browsers, apparaten en hulpmiddelen | Valide HTML, juiste ARIA-rollen, semantische markup |
Kiezen van een Toegankelijk Thema
De HTML-structuur en CSS van uw WordPress-thema vormen de basis van de toegankelijkheid van uw site. Bij het kiezen van een WordPress-thema, evalueer deze toegankelijkheidsfactoren:
- Semantische HTML: Het thema gebruikt de juiste HTML5-elementen (header, nav, main, article, aside, footer) in plaats van generieke divs voor alles
- Kopstructuur: H1 → H2 → H3 volgt een logische volgorde zonder niveaus over te slaan
- Overslaan van links: Een "Overslaan naar inhoud" link is aanwezig als het eerste focusbare element, waardoor toetsenbordgebruikers de navigatie kunnen omzeilen
- Toetsenbordnavigatie: Alle interactieve elementen (links, knoppen, formulieren) zijn bereikbaar en bruikbaar met de Tab-toets
- Focusindicatoren: Gefocuste elementen hebben een zichtbare omtrek of markering (niet verwijderd met outline: none)
- Kleurcontrast: Tekst voldoet aan de WCAG AA contrastverhoudingen (4.5:1 voor normale tekst, 3:1 voor grote tekst)
Thema's die zijn gemarkeerd als "toegankelijkheidsklaar" op WordPress.org hebben een basis toegankelijkheidsbeoordeling doorstaan. Deze tag geeft echter een startpunt aan, geen volledige WCAG-naleving. Onder populaire thema's is GeneratePress opmerkelijk goed gecodeerd met schone semantische HTML en juiste ARIA-landmerken.
Toegankelijkheid van Afbeeldingen
Alt-tekst
Elke betekenisvolle afbeelding heeft beschrijvende alt-tekst nodig. WordPress maakt dit eenvoudig—het alt-tekstveld is beschikbaar in de Mediatheek en bij het invoegen van afbeeldingen in inhoud.
| Afbeeldingstype | Alt-tekst Benadering | Voorbeeld |
|---|---|---|
| Productfoto | Beschrijf het product | "Rode leren schoudertas met gouden gesp, vooraanzicht" |
| Screenshot | Beschrijf wat de screenshot toont | "WordPress-dashboard dat de pagina Plugins toont met 12 actieve plugins" |
| Infographic | Vat de belangrijkste informatie samen | "Vergelijkingsgrafiek: Elementor vs Gutenberg functies. Elementor heeft 100+ widgets, Gutenberg heeft 90+ blokken" |
| Decoratieve afbeelding | Lege alt (alt="") | Achtergrondpatronen, scheidingslijnen, puur decoratieve iconen |
| Grafiek | Beschrijf de trend of belangrijke gegevenspunt | "Lijngrafiek die websiteverkeer toont dat met 45% toeneemt van januari tot december 2025" |
Afbeeldingsoptimalisatie voor Toegankelijkheid
- Gebruik geen afbeeldingen van tekst—gebruik in plaats daarvan echte tekst die met CSS is gestyled
- Zorg ervoor dat tekst die in afbeeldingen is ingebed voldoet aan de contrastvereisten
- Bied lange beschrijvingen voor complexe afbeeldingen (grafieken, diagrammen) met behulp van een aangrenzende paragraaf of het longdesc-attribuut
- Zorg ervoor dat afbeeldingen de juiste afmetingen hebben zodat ze geen lay-outverschuivingen (CLS) veroorzaken
Toetsenbordnavigatie
Veel gebruikers navigeren volledig met toetsenborden op websites met
een toetsenbord—Tab om vooruit te bewegen, Shift+Tab om achteruit te bewegen, Enter om links/knoppen te activeren, Spatie om selectievakjes in te schakelen en knoppen te klikken, en Escape om modals te sluiten.
Veelvoorkomende Toegankelijkheidsproblemen met het Toetsenbord
- Focusvallen: Modale dialogen die niet toestaan om terug te tabben naar de hoofdinhoud (modals moeten de focus binnen de modal vasthouden, en Escape moet ze sluiten)
- Ontbrekende focusindicatoren: CSS die de standaardomtrek op gefocuste elementen verwijdert (gebruik nooit *:focus { outline: none } globaal)
- Niet-interactieve elementen met klikhandlers: Divs of spans met onClick-evenementen die niet toegankelijk zijn met het toetsenbord (gebruik in plaats daarvan knoppen of links)
- Dropdownmenu's die alleen openen bij hover: Toetsenbordgebruikers kunnen hover-toestanden niet activeren. Menu's moeten ook openen bij focus/Enter
- Aangepaste componenten zonder ARIA: Tabs, accordions en carrousels die zijn gebouwd zonder de juiste ARIA-rollen en toetsenbordhandlers
Kleur en Contrast
WCAG AA vereist deze minimale contrastverhoudingen:
| Element | Minimale Verhouding | Voorbeeld (Pass) | Voorbeeld (Fail) |
|---|---|---|---|
| Normale tekst (<18px) | 4.5:1 | #333 op #fff (12.6:1) | #999 op #fff (2.8:1) |
| Grote tekst (≥18px of ≥14px vet) | 3:1 | #555 op #fff (7.4:1) | #aaa op #fff (2.3:1) |
| UI-componenten (knoppen, invoervelden) | 3:1 | Blauwe #2563eb knop (4.6:1) | Lichtblauwe #93c5fd (1.8:1) |
| Niet-tekstinhoud (iconen, randen) | 3:1 | Donker icoon op lichte achtergrond | Lichtgrijs icoon op wit |
Gebruik tools zoals WebAIM's Contrast Checker of de axe-browserextensie om de contrastverhoudingen te verifiëren. Vertrouw niet alleen op kleur om informatie over te brengen—gebruik tekstlabels, patronen of iconen naast kleurcodering.
Toegankelijkheid van Formulieren
Formulieren zijn een van de meest kritieke gebieden voor toegankelijkheid. Of je nu Gutenberg-blokken, Gravity Forms of WPForms gebruikt:
- Label elke invoer: Gebruik het <label>-element dat aan elke invoer is gekoppeld via het for/id-attribuut. Plaatsvervangende tekst is geen vervanging voor labels
- Groep gerelateerde velden: Gebruik <fieldset> en <legend> voor groepen gerelateerde invoeren (bijv. velden voor verzendadres)
- Geef foutmeldingen: Wanneer validatie mislukt, identificeer welk veld de fout heeft en beschrijf hoe deze te verhelpen. Gebruik aria-describedby om foutmeldingen aan hun velden te koppelen
- Markeer verplichte velden: Gebruik het vereiste attribuut en geef visueel aan welke velden verplicht zijn met tekst (niet alleen een asterisk)
- Ondersteun autocomplete: Voeg de juiste autocomplete-attributen toe (naam, e-mail, tel, adres-regel1) zodat browsers formuliergegevens automatisch kunnen invullen
Toegankelijkheid van Inhoud
Kopstructuur
Een juiste kophiërarchie helpt gebruikers van schermlezers de paginstructuur te begrijpen en tussen secties te navigeren. Regels:
- Één H1 per pagina (de pagina/post titel)
- H2 voor hoofsecties
- H3 voor subsecties binnen een H2
- Spring nooit niveaus over (H2 → H4 zonder H3 is onjuist)
- Gebruik geen koppen voor visuele styling—gebruik in plaats daarvan CSS-klassen
Linktekst
Vermijd generieke linktekst die betekenisloos is uit de context:
| Slechte Linktekst | Toegankelijke Linktekst |
|---|---|
| "Klik hier" | "Lees de WordPress beveiligingsgids" |
| "Lees meer" | "Lees de volledige Elementor Pro review" |
| "Leer meer" | "Leer hoe je de WooCommerce checkout kunt optimaliseren" |
| "Hier" | "Download het prestatiebenchmarkrapport" |
Tabellen
Gegevens tabellen moeten bevatten:
- <thead> met <th>-elementen voor kolomkoppen (met scope="col")
- <th scope="row"> voor rijkoppen
- Een <caption>-element dat het doel van de tabel beschrijft
- Eenvoudige structuur—vermijd samengevoegde cellen wanneer mogelijk, omdat deze moeilijk te interpreteren zijn voor schermlezers
Testen van de Toegankelijkheid van je Site
| Tool | Type | Wat het Test |
|---|---|---|
| axe DevTools | Browserextensie | Geautomatiseerde WCA |
| G schending detectie | ||
| WAVE | Browserextensie / web | Visuele toegankelijkheidsevaluatie met inline annotaties |
| Lighthouse | Chrome DevTools | Toegankelijkheidsaudit met scores en aanbevelingen |
| Toetsenbord testen | Handmatig | Navigeer de hele site met alleen Tab, Enter en Escape |
| Schermlezer | Handmatig | Test met VoiceOver (Mac), NVDA (Windows) of TalkBack (Android) |
Geautomatiseerde tools vangen ongeveer 30-50% van de toegankelijkheidsproblemen. Handmatig testen met een toetsenbord en schermlezer is noodzakelijk om op interactie gebaseerde problemen te identificeren die geautomatiseerde tools niet kunnen detecteren.
WordPress Plugins voor Toegankelijkheid
- WP Accessibility: Voegt overslaan links toe, lost veelvoorkomende toegankelijkheidsproblemen op, voegt een werkbalk toe voor gebruikersvoorkeuren
- One Click Accessibility: Voegt een frontend toegankelijkheidswerkbalk toe (lettergrootte, contrast, links markeren)
- Starter templates met toegankelijkheid: astra-pro-addon">Astra en GeneratePress hebben beide sterke toegankelijkheidsfundamenten in hun basisthema's
Opmerking: Toegankelijkheid overlay plugins (die een drijvend widget met "oplossing" knoppen toevoegen) worden breed bekritiseerd door de toegankelijkheidsgemeenschap. Ze maken een website niet toegankelijk—ze voegen een oppervlakkige laag toe die daadwerkelijk kan interfereren met hulpmiddelen. Focus op het integreren van toegankelijkheid in je thema en inhoud in plaats van te vertrouwen op overlays.
Voor meer details, raadpleeg de officiële documentatie: WCAG Richtlijnen, WordPress Toegankelijkheidsteam.
Veelgestelde Vragen
Is WordPress toegankelijk uit de doos?
De WordPress core is aanzienlijk verbeterd op het gebied van toegankelijkheid. Het beheerpaneel is grotendeels met het toetsenbord navigeerbaar, en de blokeditor bevat ARIA-labels. De toegankelijkheid van je site hangt echter sterk af van het thema en de plugins die je gebruikt. Een thema met een slechte HTML-structuur ondermijnt de ingebouwde toegankelijkheidsfuncties van WordPress.
Heb ik wettelijk een toegankelijke website nodig?
In veel rechtsgebieden, ja. De ADA (VS), de Europese Toegankelijkheidswet (EU, van kracht juni 2025), AODA (Canada) en soortgelijke wetten vereisen dat websites toegankelijk zijn. De specifieke vereisten zijn afhankelijk van je locatie, type bedrijf en doelgroep. Raadpleeg een juridisch professional voor vereisten die specifiek zijn voor jouw situatie.
Beïnvloedt toegankelijkheid SEO?
Ja, er is aanzienlijke overlap. Een goede kopstructuur, beschrijvende alt-tekst, semantische HTML, snelle laadtijden en mobiele vriendelijkheid komen zowel de toegankelijkheid als de SEO ten goede. Sites die de WCAG-richtlijnen volgen, hebben de neiging beter te scoren omdat ze een fundamenteel betere gebruikerservaring bieden. Voor SEO best practices, zie onze checklist.
Kunnen page builders toegankelijke websites maken?
Elementor en andere page builders kunnen toegankelijke inhoud creëren als ze correct worden gebruikt. De sleutel is ervoor te zorgen dat de juiste kophiërarchie wordt gehandhaafd, alt-tekst aan afbeeldingen wordt toegevoegd, semantische widgets worden gebruikt (knoppen in plaats van gestylede divs), en toetsenbordnavigatie wordt getest. De builder zelf bepaalt de toegankelijkheid niet—hoe je het gebruikt, doet dat wel.
Wat is de meest voorkomende toegankelijkheidsfout op WordPress-sites?
Ontbrekende of inadequate alt-tekst op afbeeldingen is de meest gerapporteerde WCAG-schending. De tweede meest voorkomende is onvoldoende kleurcontrast. Beide zijn eenvoudig op te lossen—ze vereisen aandacht en consistente oefening in plaats van technische expertise.
Hoe maak ik WooCommerce toegankelijk?
De standaardtemplates van WooCommerce hebben redelijke toegankelijkheid. Belangrijke gebieden om te verifiëren: alt-tekst van productafbeeldingen, formulierlabels op afrekenvelden, toetsenbordnavigeerbaarheid van het winkelwagentje en het afrekenproces, en toegankelijke foutmeldingen voor formuliervalidatiefouten. Het gebruik van een toegankelijk thema als basis vermindert aanzienlijk het specifieke werk dat nodig is voor WooCommerce.
Bouw Toegankelijke WordPress Sites
Begin met een toegankelijke themafundament. Blader door lichte, goed gecodeerde thema's die semantische HTML en WCAG-naleving prioriteren.
Blader door Toegankelijke Thema's →
