Toegankelijkheidscontrole
Controleer HTML-fragmenten op veelvoorkomende WCAG-toegankelijkheidsproblemen met bruikbare suggesties om ze op te lossen
HTML-invoer
Wat Wij Controleren
Alt-tekst van Afbeeldingen
Controleert of alle <img>-elementen een alt-attribuut hebben, zodat schermlezers afbeeldingen aan gebruikers kunnen beschrijven.
Formulierlabels
Verifieert of alle formulierinvoeren zijn gekoppeld aan labels via <label for>, aria-label of aria-labelledby.
Koppenhiërarchie
Zorgt ervoor dat koppen een logische volgorde volgen (h1, h2, h3...) zonder niveaus over te slaan.
Linktekst
Detecteert lege links en generieke linkteksten zoals 'klik hier' die niet betekenisvol zijn voor gebruikers van schermlezers.
Taal-attribuut
Controleert op een lang-attribuut op het <html>-element, wat schermlezers helpt om de juiste uitspraak te gebruiken.
ARIA en Interactieve Elementen
Verifieert of interactieve elementen over de juiste rollen en ARIA-labels beschikken voor ondersteuning van hulptechnologieën.
Toegankelijkheidscontrole
Controleer HTML-fragmenten op veelvoorkomende WCAG-toegankelijkheidsproblemen met bruikbare suggesties om ze op te lossen
Functies
- Parse pasted HTML locally with DOMParser and check for common WCAG issues
- 12+ rule categories: alt text, form labels, heading hierarchy, empty links, ARIA usage, tabindex misuse, autoplay
- No network calls — paste HTML, get instant feedback
- NOT a full WCAG audit — for that use axe-core, Lighthouse, or a dedicated tool
- Useful for quick sanity-checks during development
Hoe te gebruiken
- Plak uw HTML-code in het invoervak of laad een van de voorbeeldfragmenten om de tool in actie te zien.
- Klik op 'Toegankelijkheid Controleren' om uw HTML te analyseren op veelvoorkomende WCAG-problemen op basis van meer dan 12 toegankelijkheidsregels.
- Bekijk de resultaten gegroepeerd op ernst, lees de oplossingsadviezen en werk uw HTML bij om de gevonden problemen op te lossen.
Tips en best practices
- Paste the HTML source (View Source / Inspect → Outer HTML) — the checker doesn't fetch URLs (CORS would block that anyway).
- For a complete audit, use axe-core in your test suite or Lighthouse in DevTools — those check ~30 more rules including dynamic ones.
- Heading hierarchy: each level should follow the previous (h1 → h2 → h3); skipping levels is flagged.
- Alt text rule allows `alt=""` for purely decorative images — only missing/duplicate alt is flagged.
- Form labels: every input should have an associated label (via `for` attribute) or `aria-label`. Placeholder-only is flagged.
Veelgestelde vragen
Welke toegankelijkheidsproblemen controleert deze tool?
Deze tool controleert meer dan 12 veelvoorkomende WCAG-toegankelijkheidsproblemen, waaronder: ontbrekende alt-attributen bij afbeeldingen, formulierinvoeren zonder bijbehorend label, overtredingen van de koppenhiërarchie (overgeslagen niveaus), lege links en generieke linkteksten, ontbrekend lang-attribuut op het HTML-element, interactieve elementen zonder ARIA-rollen of -labels, lege knoppen, verouderde HTML-elementen, positieve tabindex-waarden die de tabvolgorde verstoren, media-elementen met autoplay en ontbrekende documenttitels. Elk probleem is gekoppeld aan specifieke WCAG-succescriteria.
Vervangt dit een volledige WCAG-audit?
Nee, deze tool controleert alleen veelvoorkomende problemen op HTML-niveau die kunnen worden gedetecteerd door de markup te parsen. Een volledige WCAG 2.1- of 2.2-audit vereist tests met echte hulptechnologieën zoals schermlezers, het controleren van kleurcontrastverhoudingen, het verifiëren van toetsenbordnavigatie, het testen van dynamische inhoudsupdates en het beoordelen van cognitieve toegankelijkheid. Deze tool is een uitstekende eerste stap om de meest voorkomende problemen op te sporen voordat u een volledige handmatige audit uitvoert.
Wat is het verschil tussen fouten en waarschuwingen?
Fouten wijzen op duidelijke toegankelijkheidsovertredingen die gebruikers van hulptechnologieën zeker zullen raken. Zo is een ontbrekend alt-attribuut bij een afbeelding een fout, omdat schermlezers de afbeelding niet kunnen beschrijven. Waarschuwingen duiden op mogelijke problemen die afhankelijk van de context wel of niet problematisch zijn. Een leeg alt-attribuut is bijvoorbeeld een waarschuwing, omdat dit correct is voor decoratieve afbeeldingen, maar onjuist voor informatieve afbeeldingen. Geslaagde controles bevestigen dat aan een specifieke controle is voldaan.
Kan ik een live website-URL controleren in plaats van HTML plakken?
Deze tool is ontworpen om HTML-fragmenten te controleren die u rechtstreeks plakt. Voor het testen van live websites moet u de paginabron bekijken of de ontwikkelaarstools van de browser gebruiken om de HTML te kopiëren en hier te plakken. Voor het testen van live websites kunt u browserextensies zoals axe DevTools of Lighthouse overwegen, die de gerenderde DOM kunnen inspecteren, inclusief dynamisch gegenereerde inhoud.
Waarom is het lang-attribuut op het HTML-element zo belangrijk?
Het lang-attribuut vertelt schermlezers en andere hulptechnologieën in welke taal de inhoud is geschreven. Zonder dit attribuut zou een schermlezer Engelse tekst kunnen proberen voor te lezen volgens Franse uitspraakregels, waardoor de inhoud onverstaanbaar wordt. Het beïnvloedt ook hoe browsers omgaan met afbreken, spellingcontrole en andere taalafhankelijke functies. Het instellen van lang is een van de eenvoudigste maar meest impactvolle toegankelijkheidsverbeteringen die u kunt doorvoeren.
Wordt mijn HTML-code voor analyse naar een server verzonden?
Nee, de volledige analyse vindt plaats in uw browser met behulp van JavaScript. Uw HTML-code verlaat nooit uw apparaat. De tool parseert de HTML met de ingebouwde DOMParser-API van de browser en voert alle toegankelijkheidscontroles lokaal uit. Daardoor is het veilig om de tool te gebruiken met eigendomscode, interne projecten of HTML met gevoelige inhoud.