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
- Afbeeldingen en alt-tekst
- Je ziet welke afbeeldingen een alt-tekst hebben, welke een leeg alt-attribuut hebben (alt="") en welke er geen hebben. De lens toont de alt-tekst, maar oordeelt niet: jij bepaalt of een afbeelding betekenis draagt of niet.
- 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.
- Linkteksten
- De lens markeert vage links zoals “lees meer” en links zonder tekst. Een goede linktekst vertelt op zichzelf waar je terechtkomt.
- Zintuiglijke verwijzingen
- De lens markeert woorden als “links”, “rechts” en “hieronder”. Wie de pagina niet ziet, weet dan niet waar iets staat. Controleer of je de instructie ook zonder die verwijzing kunt begrijpen.
- 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.
- 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.
- Formuliervelden en labels
- De lens markeert invoervelden zonder toegankelijke naam en velden die alleen een placeholder hebben. Een placeholder verdwijnt zodra je typt en telt niet als label. Zo zie je meteen welke velden een echt label missen.
- Titels van ingesloten kaders
- 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.
- 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?
- 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.
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.
- 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.
- 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)
- De lens markeert klikbare elementen die kleiner zijn dan 24 bij 24 pixels. 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.
- 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.
- Tekst vergroten (200%)
- De lens zet alle tekst op 200%, zoals een slechtziende bezoeker dat doet. Kijk of er tekst wegvalt, overlapt of buiten beeld raakt en of alles nog te bedienen is.
- Tekst vergroten (400%)
- De lens zet alle tekst op 400%. Kijk of de tekst nog leesbaar meebeweegt zonder horizontaal scrollen en of niets overlapt of wegvalt.
- Blokken en tagnamen tonen
- Alle blokken krijgen een rand en de belangrijkste structuurelementen tonen hun tagnaam. Zo zie je hoe de semantiek onder je ontwerp is opgebouwd.
- Afbeeldingen uit
- Afbeeldingen worden vervaagd. Kijk of je ontwerp zonder beeld nog te begrijpen is en of de tekst het verhaal alleen kan dragen.
- 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
- ARIA-rollen en -attributen
- De lens toont alle rollen en aria-attributen en markeert gebroken referenties naar id's die niet bestaan. Zo zie je meteen waar aria-labelledby of aria-controls nergens op wijst.
- 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.
- 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.
- 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.
- Tekstcontrast
- De lens markeert automatisch tekst op een effen achtergrond die onder 4,5:1 (normale tekst) of 3:1 (grote tekst) zakt. Voor tekst op een afbeelding of gradient meet je zelf twee kleuren met de twee pipetten.
- 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.
- Tekst vergroten (200%)
- De lens zet alle tekst op 200%, zoals een slechtziende bezoeker dat doet. Controleer of er tekst wegvalt, overlapt of buiten beeld raakt en of alles nog te bedienen is.
- Iframes (titel)
- Iframes zonder title of aria-label springen eruit. Een titel is nodig zodat een screenreadergebruiker weet wat er in het kader zit.
- Element-info bij hover
- Beweeg met de muis over de pagina en zie tag, id, class, rol, toegankelijke naam en afmeting van elk element. Sneller dan de inspector openen voor een snelle check.
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 aanOok 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