Gratis · Werkt in je eigen browser

WCAG Radar

Sleep de knop hieronder één keer naar je bladwijzerbalk. Klik hem daarna op elke pagina aan, ook achter een login of op localhost. Er wordt niets verstuurd of opgeslagen.

WCAG Radar

Sleep de knop, klik hem niet aan. Zie je je bladwijzerbalk niet? Druk opCtrl+Shift+B(Windows) of⌘+⇧+B(Mac).

Draait volledig in je browser
Geen installatie, geen account
Werkt achter een login en op localhost
Verstuurt niets

Eén tool, drie tabbladen

Bovenin het paneel wissel je tussen Redactie, Designer en Developer. Elk tabblad heeft zijn eigen set checks, afgestemd op wat jij doet.

Redactie

Alt-teksten, koppen, linkteksten, tabellen, taal, contrast: alles wat je in de tekst zelf regelt.

Designer

Contrast, kleurgebruik, focus, doelgrootte, tekstafstand en tekstvergroting: alles wat je in het ontwerp bepaalt.

Developer

ARIA, toegankelijke namen, tabvolgorde, focus, contrast en iframes: alles wat je in de code moet nalopen.

Redactie: wat de lens laat zien

Taal van de pagina: Je ziet of de paginataal is ingesteld en welke onderdelen een andere taal hebben. De juiste taal zorgt dat een screenreader de woorden goed uitspreekt.
Paginatitel: De lens toont de titel van de pagina. Een duidelijke, unieke titel helpt bezoekers om tabbladen en zoekresultaten uit elkaar te houden.
Opmaak uit (leesvolgorde): Met één klik zet je alle opmaak uit. Je ziet dan de kale volgorde waarin een screenreader de pagina voorleest. Loopt je verhaal nog logisch?
Leesvolgorde (overzicht): De pagina als klikbare lijst, zoals hulpsoftware hem doorloopt: koppen, landmarks, links, knoppen en velden in documentvolgorde. Zo zie je of het verhaal logisch loopt, en klik je direct naar elk element.
Verborgen elementen tonen: Je ziet welke elementen verborgen zijn en waarom (display:none, visibility:hidden, het hidden-attribuut of aria-hidden). Handig om te controleren of er content per ongeluk onzichtbaar is, of juist dubbel wordt voorgelezen.
Koppen en structuur: De lens tekent alle koppen met hun niveau en waarschuwt als je een niveau overslaat. Een logische koppenstructuur helpt iedereen die de pagina scant of met een screenreader leest.
Kwaliteit van kopteksten: De lens markeert lege koppen en koppen met een nietszeggende tekst zoals “Ga naar” of “Lees meer”. Wie op koppen navigeert, moet aan de koptekst kunnen zien waar de sectie over gaat.
Zintuiglijke verwijzingen: De lens markeert verwijzingen naar positie, kleur of vorm, zoals “links”, “rechtsboven” of “de rode knop”, ook in alt-teksten. Wie de pagina niet ziet, heeft daar niets aan. Controleer of je de instructie ook zonder die verwijzing kunt begrijpen.
Lijststructuur: De lens markeert echte lijsten, zodat je ziet of opsommingen ook echt als lijst zijn opgemaakt en niet als losse regels met streepjes.
Tabellen: De lens markeert tabellen zonder kopcellen of bijschrift. Kopcellen vertellen voorleessoftware welke rij of kolom bij een cel hoort, zodat een bezoeker een tabel kan volgen.
Afbeeldingen en alt-tekst: Je ziet welke afbeeldingen een alt-tekst hebben, welke een leeg alt-attribuut hebben (alt="") en welke er geen hebben. Ook zichtbare svg-afbeeldingen doen mee: je ziet hun title en desc. De lens waarschuwt bij overbodige woorden als “afbeelding van” in de alt-tekst, maar oordeelt verder niet: jij bepaalt of een afbeelding betekenis draagt of niet.
Afbeeldingen uit: Afbeeldingen worden vervaagd. Kijk of je pagina zonder beeld nog te begrijpen is en of de tekst het verhaal alleen kan dragen.
Klikbare afbeeldingen: Links en knoppen met een afbeelding erin tonen hun toegankelijke naam. Die naam moet de bestemming of functie beschrijven, niet hoe de afbeelding eruitziet. Klikbare afbeeldingen zonder naam worden als fout gemarkeerd.
Toon toegankelijke naam: Elk interactief element (links, knoppen, formuliervelden) toont zijn toegankelijke naam: de naam die een screenreader voorleest. Elementen zonder naam worden als fout gemarkeerd.
Linkteksten: De lens markeert vage links zoals “lees meer” en links zonder tekst. Een goede linktekst vertelt op zichzelf waar je terechtkomt.
Alle links: Alle links op de pagina in één lijst in het paneel, zoals een screenreader ze voorleest: alleen de linktekst, zonder context eromheen. Lege en vage teksten springen eruit. Klik op een regel om naar de link op de pagina te springen.
Titels van ingesloten kaders (iframes): De lens markeert ingesloten kaders (iframes), zoals een video of een kaart, zonder titel. Een titel vertelt een screenreadergebruiker wat er in het kader zit.
Autocomplete bij persoonlijke gegevens: Velden die om persoonlijke gegevens vragen, zoals naam, e-mailadres of telefoonnummer, horen een autocomplete-attribuut te hebben. Dan kan de browser ze invullen; dat helpt onder meer mensen met een motorische of cognitieve beperking. De lens toont de waarde en waarschuwt als die ontbreekt of onbekend is.
Toegankelijke naam bij formuliervelden: De lens markeert invoervelden zonder toegankelijke naam en velden die alleen een placeholder hebben. Let op: zichtbare tekst naast een veld telt alleen als toegankelijke naam als hij via <label for>, aria-label of aria-labelledby aan het veld is gekoppeld. Een placeholder verdwijnt zodra je typt en telt sowieso niet.
Foutmeldingen bij formuliervelden: De lens zoekt zichtbare foutmeldingen op vier manieren: role=alert of aria-live, een class of id als error/invalid, een veld dat er zelf naar wijst, en rode tekst vlak bij een invoerveld. Die laatste manier vangt sites waarvan het framework genummerde klassen uitspuugt en helemaal geen ARIA gebruikt. Daarna checkt de lens of de melding via aria-describedby of aria-errormessage aan een veld gekoppeld is. Ongekoppelde meldingen zijn een fout: een screenreader kondigt ze niet aan.
Tekstcontrast: De lens markeert automatisch tekst op een effen achtergrond die te weinig contrast heeft. Voor tekst op een foto of gradient meet je zelf twee kleuren met de twee pipetten. Je ziet meteen de contrastverhouding en of die voldoet aan de eis voor normale en grote tekst. Een glyph uit een icoonfont is een tekening, geen tekst: die meet de lens apart tegen de eis van 3:1.

Designer: wat de lens laat zien

Tekstcontrast: De lens markeert automatisch tekst op een effen achtergrond die te weinig contrast heeft. Voor tekst op een foto of gradient meet je zelf twee kleuren met de twee pipetten. Je ziet meteen de contrastverhouding en of die voldoet aan de eis voor normale en grote tekst. Een glyph uit een icoonfont is een tekening, geen tekst: die meet de lens apart tegen de eis van 3:1.
Contrast van randen en focus: Meet het contrast van de randen van invoervelden en van de focusstijl (WCAG 1.4.11). De lens zet daarvoor kort focus op elk element en waarschuwt onder 3:1, of als een zichtbare focusstijl helemaal ontbreekt.
Links alleen in kleur: Vindt links in lopende tekst die alleen door kleur van de tekst te onderscheiden zijn (geen onderstreping) en toont het kleurverschil met de omringende tekst. Onderstrepen is de veiligste oplossing.
Grijswaarden (kleurblind-check): Met één klik wordt de pagina grijs. Zo controleer je of informatie zoals links of foutmeldingen ook zonder kleur te herkennen is.
Donkere modus: Past de donkere modus van de site geforceerd toe (de prefers-color-scheme: dark-stijlen), zodat je contrast en leesbaarheid in dark mode kunt controleren. Heeft de site geen dark-mode-stijlen, dan meldt de lens dat eerlijk.
Focus zichtbaar maken: De lens forceert een duidelijke focusrand. Tab door je ontwerp om te zien of elke interactieve laag een zichtbare focus heeft.
Doelgrootte (24px): Elk klikbaar element toont zijn afmetingen; elementen kleiner dan 24 bij 24 pixels krijgen een oranje markering. Let op: een klein doel kan toch voldoen, bijvoorbeeld een link midden in een tekst of een doel met genoeg ruimte eromheen. Gebruik de markering als startpunt om te controleren.
Gebaren en muis-only bediening: Markeert elementen die alleen met de muis of aanraking te bedienen zijn: script-klikbare elementen zonder toetsenbordfocus, drag-en-drop zonder duidelijk alternatief en nep-knoppen met alleen een muiscursor.
Alleen tekst vergroten (200%): De lens zet alle tekst op 200% en laat de viewport even breed staan, zoals de instelling “Alleen tekst zoomen” in Firefox en de lettergrootte-instelling van het besturingssysteem. Kijk of er tekst wegvalt, overlapt of buiten beeld raakt en of alles nog te bedienen is.
Pagina-zoom 200% (640 px): Opent de pagina in een venster van 640 pixels breed. Dat is dezelfde layout als 1280 pixels met 200% browserzoom, dus met dezelfde mediaquery’s en dezelfde reflow. Zoom dat venster daarna zelf in met Control + of Command + om ook de tekstgrootte te zien.
Tekstafstand (1.4.12): De lens past de WCAG-tekstafstanden toe. Kijk of er tekst wegvalt, overlapt of wordt afgekapt als een bezoeker meer ruimte tussen letters en regels instelt.
Reflow (320 px): Controleert op horizontale scroll op paginaniveau, markeert de elementen die buiten beeld steken en opent de pagina in een venster van 320 pixels breed (WCAG 1.4.10).
Afbeeldingen uit: Afbeeldingen worden vervaagd. Kijk of je ontwerp zonder beeld nog te begrijpen is en of de tekst het verhaal alleen kan dragen.
Automatische beweging: Vindt beweging die vanzelf start en langer dan 5 seconden duurt: CSS-animaties, autoplay-video's en marquees. De lens kijkt ook 5 seconden mee naar scriptgestuurde beweging zoals carrousels en tickers.
Liniaal en hulplijnen: Een horizontale en verticale hulplijn volgen je muis en tonen de x- en y-positie in pixels, zodat je uitlijning en afstanden nauwkeurig kunt nalopen.

Developer: wat de lens laat zien

Element-info bij hover: Beweeg met de muis over de pagina en zie tag, id, class, rol, toegankelijke naam, afmeting en focusbaarheid van elk element. Waar de achtergrond betrouwbaar te meten is, zie je ook de tekst- en achtergrondkleur met de contrastratio. Sneller dan de inspector openen voor een snelle check. Werkt ook in ingesloten kaders van hetzelfde domein; kaders van andere domeinen zijn technisch niet bereikbaar.
Toon toegankelijke naam: Elk interactief element (links, knoppen, formuliervelden) toont zijn toegankelijke naam: de naam die een screenreader voorleest. Elementen zonder naam worden als fout gemarkeerd.
ARIA-rollen en -attributen: De lens toont alle rollen en aria-attributen en markeert vier soorten fouten: gebroken referenties naar id's die niet bestaan, onbekende rollen (typfouten), rollen zonder verplicht attribuut (zoals checkbox zonder aria-checked) en aria-hidden op focusbare inhoud.
Iframes (titel): Iframes zonder title of aria-label springen eruit. Een titel is nodig zodat een screenreadergebruiker weet wat er in het kader zit.
Autocomplete bij persoonlijke gegevens: Velden die om persoonlijke gegevens vragen horen een autocomplete-attribuut met een geldige waarde te hebben (WCAG 1.3.5). De lens toont de waarde per veld en waarschuwt bij ontbrekende of onbekende waarden.
Groepen en zichtbare labels: Fieldsets zonder legend en groepen (role=group) zonder naam worden als fout gemarkeerd. Daarnaast zie je welke velden alleen een aria-label hebben en dus geen zichtbaar label. Dat mag soms, bijvoorbeeld een vergrootglas-icoon bij een zoekveld, maar meestal hoort er zichtbare tekst bij.
Toegankelijke naam bij formuliervelden: De lens markeert invoervelden zonder toegankelijke naam en velden die alleen een placeholder hebben. Zichtbare tekst naast een veld telt alleen als hij via <label for>, aria-label of aria-labelledby aan het veld is gekoppeld.
Verplichte velden: Toont welke velden als verplicht zijn gemarkeerd voor hulpsoftware (required of aria-required) en waarschuwt bij velden met een sterretje of 'verplicht' in het label die deze markering missen.
Foutmeldingen bij formuliervelden: De lens zoekt zichtbare foutmeldingen op vier manieren: role=alert of aria-live, een class of id als error/invalid, een veld dat er zelf naar wijst (aria-errormessage, of aria-describedby bij een veld op aria-invalid="true"), en rode tekst vlak bij een invoerveld. Die laatste manier vangt sites waarvan het framework genummerde klassen uitspuugt en helemaal geen ARIA gebruikt; de samenvatting vertelt hoeveel meldingen alleen aan de kleur herkend zijn. Ongekoppelde meldingen zijn een fout: een screenreader kondigt ze niet aan. Gekoppelde meldingen zonder aria-invalid="true" op het veld krijgen een waarschuwing, en een veld dat wél op aria-invalid="true" staat zonder gekoppelde melding krijgt een fout.
Plakken geblokkeerd: De lens markeert elementen die plakken, kopiëren of slepen blokkeren via inline code (onpaste, oncopy, oncut, ondrop). Geblokkeerd plakken dwingt overtypen af en is een drempel, bijvoorbeeld bij wachtwoorden en e-mailbevestigingen. Blokkades via scripts kan de lens niet zien; test het plakken ook zelf.
Focus zichtbaar maken: De lens forceert een duidelijke focusrand op elk element. Tab door de pagina om te zien of de focus altijd zichtbaar is en logisch verspringt.
Tabvolgorde: Elk focusbaar element krijgt een nummer in de volgorde waarin je er met Tab doorheen gaat. Positieve tabindex-waarden springen vóór de rest en worden als fout gemarkeerd, want die verstoren de logische toetsenbordvolgorde.
Doelgrootte (24px): Elk klikbaar element toont zijn afmetingen; elementen kleiner dan 24 bij 24 pixels krijgen een oranje markering. Een klein doel kan toch voldoen, bijvoorbeeld een link midden in een tekst.
Gebaren en muis-only bediening: Markeert elementen die alleen met de muis of aanraking te bedienen zijn: script-klikbare elementen zonder toetsenbordfocus, drag-en-drop zonder duidelijk alternatief en nep-knoppen met alleen een muiscursor.
Alleen tekst vergroten (200%): De lens zet alle tekst op 200% en laat de viewport even breed staan, zoals de instelling “Alleen tekst zoomen” in Firefox en de lettergrootte-instelling van het besturingssysteem. Controleer of er tekst wegvalt, overlapt of buiten beeld raakt en of alles nog te bedienen is.
Pagina-zoom 200% (640 px): Opent de pagina in een venster van 640 pixels breed. Dat is dezelfde layout als 1280 pixels met 200% browserzoom, dus met dezelfde mediaquery’s en dezelfde reflow. Zoom dat venster daarna zelf in met Control + of Command + om ook de tekstgrootte te zien.
Tekstafstand (1.4.12): De lens past de WCAG-tekstafstanden toe: regelhoogte, letter- en woordafstand en alinea-afstand. Zo zie je meteen of er tekst wegvalt, overlapt of wordt afgekapt.
Reflow (320 px): Controleert op horizontale scroll op paginaniveau, markeert de elementen die buiten beeld steken en opent de pagina in een venster van 320 pixels breed (WCAG 1.4.10).
Tekstcontrast: De lens markeert automatisch tekst op een effen achtergrond die onder 4,5:1 (normale tekst) of 3:1 (grote tekst) zakt. Een teken uit een icoonfont staat wel in een tekstknoop, maar is een tekening: daarvoor geldt 3:1 (niet-tekstuele content) en de samenvatting telt die pictogrammen apart. Voor tekst op een afbeelding of gradient meet je zelf twee kleuren met de twee pipetten.
Contrast van randen en focus: Meet het contrast van de randen van invoervelden en van de focusstijl (WCAG 1.4.11). De lens zet daarvoor kort focus op elk element en waarschuwt onder 3:1, of als een zichtbare focusstijl helemaal ontbreekt.

Wat is er nieuw

De Radar draait nu op versie 2.19.6. Je hoeft niets opnieuw te installeren: de bookmarklet haalt de nieuwste versie zelf op, uiterlijk een uur na een update. Het versienummer staat onderin het paneel.

De lens vervangt geen audit

WCAG Radar helpt je de meest voorkomende problemen zelf te vinden en op te lossen. Voor een volledige audit met bevindingen per element, user stories en concrete oplossingen kom je bij Proper Access uit.

Vraag een offerte aan

Ook op deze site

Gratis toegankelijkheidsscan

Geef een URL en krijg binnen 90 seconden een rapport terug. axe-core 4.11 in een echte Chromium-browser, multi-page crawl, overlay-detectie.

Naar de scanner