WCAG Radar
WCAG Radar laat de toegankelijkheid van je pagina live zien, gratis en direct in je eigen browser. Sleep de knop één keer naar je bladwijzerbalk en klik hem daarna aan op elke website, ook achter een login of op localhost. Er wordt niets verstuurd of opgeslagen.
Bovenin het paneel wissel je tussen drie tabbladen, afgestemd op wat jij doet:
- Redactie, voor alt-teksten, koppen, linkteksten, tabellen, taal en contrast.
- Designer, voor contrast, kleurgebruik, focus, doelgrootte, tekstafstand en tekstvergroting.
- Developer, voor ARIA, toegankelijke namen, tabvolgorde, focus, contrast en iframes.
De radar vervangt geen volledige audit, maar helpt je de meest voorkomende fouten zelf op te sporen en op te lossen.
Sleep deze knop naar je bladwijzerbalk:
WCAG RadarJe kunt er ook meteen hier op klikken om WCAG Radar op deze pagina te proberen.
Werkt in Chrome, Edge, Firefox en Safari. Klik daarna op de bladwijzer op elke website om de radar te openen. Klik nogmaals om te sluiten.
Slepen lukt niet? Maak de bladwijzer handmatig
- Maak een nieuwe bladwijzer aan (ster-icoon of Ctrl/Cmd + D).
- Geef de bladwijzer een naam, bijvoorbeeld “WCAG Radar”.
- Plak de onderstaande code in het adresveld van de bladwijzer.
Wat WCAG Radar laat zien
Tabblad Redactie
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 radar toont de alt-tekst, maar oordeelt niet: jij bepaalt of een afbeelding betekenis draagt of niet.
Koppen en structuur
De radar 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 radar markeert vage links zoals “lees meer” en links zonder tekst. Een goede linktekst vertelt op zichzelf waar je terechtkomt.
Zintuiglijke verwijzingen
De radar 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 radar markeert echte lijsten, zodat je ziet of opsommingen ook echt als lijst zijn opgemaakt en niet als losse regels met streepjes.
Tabellen
De radar markeert tabellen zonder kopcellen of bijschrift. Kopcellen vertellen voorleessoftware welke rij of kolom bij een cel hoort, zodat een bezoeker een tabel kan volgen.
Toegankelijke naam bij formuliervelden
De radar 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.
Titels van ingesloten kaders (iframes)
De radar 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 radar 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 radar 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.
Tabblad Designer
Tekstcontrast
De radar 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 radar forceert een duidelijke focusrand. Tab door je ontwerp om te zien of elke interactieve laag een zichtbare focus heeft.
Doelgrootte (24px)
De radar 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 radar 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 radar 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.
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.
Tabblad Developer
ARIA-rollen en -attributen
De radar 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.
Foutmeldingen bij formuliervelden
De radar zoekt zichtbare foutmeldingen (via role=alert, aria-live, of een class als error/invalid) en checkt of ze via aria-describedby of aria-errormessage aan een invoerveld gekoppeld zijn. Ongekoppelde meldingen zijn een fout: een screenreader kondigt ze niet aan. Gekoppelde meldingen zonder aria-invalid="true" op het veld krijgen een waarschuwing.
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 radar 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 radar 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 radar 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 radar 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.
Waarom een radar en geen scanner?
Een automatische scan vindt hooguit een derde van de toegankelijkheidsproblemen. WCAG Radar laat je zien wat er echt op je pagina staat, zodat je met je eigen ogen beoordeelt of het klopt. De radar draait volledig in je eigen browser: er wordt niets verstuurd of opgeslagen.
Wil je zeker weten dat je hele website voldoet? Wij testen handmatig met screenreaders en echte gebruikersverhalen.
Vraag een offerte aan of bel 085 5055 890.