WCAG Radar
Een knop in je bladwijzerbalk of een extensie voor Chrome en Firefox, die op elke pagina laat zien hoe het met de toegankelijkheid staat. 28 van de 45 checks zijn gratis en vragen geen account. Koppen, alt-teksten, contrast, focus en ARIA, direct zichtbaar op je eigen scherm. De radar draait volledig in je browser: er wordt niets verstuurd en niets opgeslagen.
Zo krijg je de radarZo krijg je de radar
Drie manieren, dezelfde radar. De bookmarklet installeer je niet: je sleept hem naar je bladwijzerbalk en hij werkt in elke browser. De extensie zet je één keer in Chrome of Firefox en staat daarna in je werkbalk.
Bookmarklet
Werkt in elke browser, zonder iets te installeren. Ook op een computer waarop dat niet mag.
Sleep deze knop naar je bladwijzerbalk:
WCAG RadarSlepen lukt niet? Maak de bladwijzer handmatig
- Maak een nieuwe bladwijzer aan met het ster-icoon of met Ctrl + D, op een Mac Cmd + D.
- Geef de bladwijzer een naam, bijvoorbeeld “WCAG Radar”.
- Plak de onderstaande code in het adresveld van de bladwijzer.
Extensie voor Chrome
Ook voor Edge, Brave en Vivaldi, want die draaien op dezelfde extensies. De radar krijgt een eigen knop in je werkbalk, dus je hebt geen bladwijzerbalk in beeld nodig.
Installeer in ChromeJe gaat naar de Chrome Web Store.
Extensie voor Firefox
Voor Firefox op Windows, macOS en Linux. Ook hier krijgt de radar een eigen knop in je werkbalk en werkt hij op pagina's achter een login en op localhost.
Installeer in FirefoxJe gaat naar addons.mozilla.org.
De radar vindt mogelijke problemen, jij beoordeelt ze
Gebruik de radar om te zien waar mogelijk iets misgaat. Wat oplicht is een startpunt, geen oordeel. Uitzonderingen en ingewikkelde onderdelen beoordeel je daarna zelf.
Een klein klikdoel kan alsnog voldoen. Een alt-tekst kan aanwezig zijn en toch niet kloppen bij de afbeelding. Of iets echt een probleem is, hangt af van de context, en die kent geen enkele tool. Geen enkele tool vervangt een menselijk oordeel.
Wat je van de radar mag verwachten
Er wordt niets opgeslagen
De radar draait volledig in je eigen browser. Je pagina, je teksten en je afbeeldingen verlaten je computer niet. We slaan geen URL's op en houden niet bij wat je controleert.
Veilig in afgeschermde omgevingen
Je kunt de radar gebruiken achter een login, op een acceptatieomgeving en op localhost. Er gaat niets naar buiten, dus je hoeft geen testomgeving open te zetten voor een externe scanner.
100% Europees
Het script komt van een server binnen de Europese Unie. Geen Amerikaanse clouddienst, geen tracking, geen cookies. Ook de rest van deze website draait op Europese infrastructuur.
Actief in ontwikkeling
We voegen regelmatig checks toe en scherpen bestaande aan. Je bladwijzer werkt vanzelf bij, je hoeft hem niet opnieuw te slepen. Binnen een dag heb je de nieuwste versie te pakken.
Welke versie je draait, zie je onderin het paneel van de radar zelf.
Wat WCAG Radar laat zien
Bovenin het paneel wissel je tussen drie tabbladen, afgestemd op wat jij doet. Elk tabblad bevat de controles die bij die rol horen, dus je hoeft niet langs alles te scrollen wat je toch niet gebruikt.
Vindt een check iets, dan verschijnen er knoppen om vooruit en achteruit door de resultaten te springen. Zo loop je elke bevinding op de pagina langs zonder zelf te zoeken.
De radar telt 45 checks. Daarvan zijn er 28 gratis en die blijven dat, zonder account. De overige 17 zijn gemarkeerd met “Licentie”: die staan wel in het paneel, maar draaien pas als je een licentie hebt. Daarbij hoort ook het opslaan van een rapport van je testsessie. Wat een licentie kost, staat op de prijzenpagina van Testtoegankelijkheid.
Tabblad Redactie
Paginatitel
De radar toont de titel van de pagina. Een duidelijke, unieke titel helpt bezoekers om tabbladen en zoekresultaten uit elkaar te houden.
Lees meer uitleg over paginatitelsOpmaak 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?
Lees meer uitleg over de leesvolgordeLeesvolgorde (overzicht) Licentie
De pagina als klikbare lijst, precies zoals voorleessoftware hem doorloopt: de koppen, de links, de knoppen en de invoervelden, in de volgorde waarin ze in de pagina staan. Lees die lijst van boven naar beneden. Snap je zo waar de pagina over gaat en wat je er kunt doen? Klik op een regel om naar dat stuk op de pagina te springen.
Lees meer uitleg over de leesvolgordeVerborgen onderdelen tonen Licentie
Sommige stukken staan wel in de pagina, maar zie je niet. Vaak klopt dat, bijvoorbeeld een menu dat pas opengaat als je erop klikt. Soms is het per ongeluk, en dan leest voorleessoftware iets voor dat er niet meer hoort te staan, of twee keer hetzelfde. De radar maakt die verborgen stukken zichtbaar en zet erbij op welke manier ze verstopt zijn. Kijk of er iets tussen staat dat allang weg had gemoeten.
Lees meer uitleg over verborgen inhoudKoppen 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.
Lees meer uitleg over koppenKwaliteit van kopteksten Licentie
De radar 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.
Lees meer uitleg over koppen en labelsVerwijzingen naar plek, kleur of vorm
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.
Lees meer uitleg over zintuiglijke verwijzingenRegeleinden als opmaak Licentie
Twee lege regels achter elkaar zien eruit als ruimte tussen twee alinea's. Voor voorleessoftware is het één lange alinea: je kunt er niet per alinea doorheen springen en de korte pauze tussen alinea's valt weg. Regels die met een streepje of een bolletje beginnen zijn een nagemaakte lijst, en tellen dus niet als lijst. De radar markeert allebei. Losse regeleinden, zoals in een adres of een gedicht, laat hij met rust.
Lees meer uitleg over informatie en relatiesSterke nadruk (strong) Licentie
De radar markeert elk stukje tekst met sterke nadruk, het strong-element. Sterke nadruk betekent: dit is belangrijk. Het is niet bedoeld om letters dikker te maken, dat is een kwestie van vormgeving. Staat er een hele zin of een hele alinea in, dan ligt de nadruk op alles en dus op niets; die krijgen een markering. Gebruik nadruk voor het woord of de paar woorden waar het echt om draait.
Lees meer uitleg over informatie en relatiesNadruk (em) Licentie
De radar markeert elk stukje tekst met nadruk, het em-element. Nadruk legt de klemtoon op een woord, zoals je dat in een gesprek met je stem doet. Het is niet bedoeld om letters schuin te zetten, dat is vormgeving. Een hele zin of een hele alinea met nadruk wordt gemarkeerd, want dan hoor je niet meer waar de klemtoon ligt.
Lees meer uitleg over informatie en relatiesLijststructuur
De radar markeert echte lijsten, zodat je ziet of opsommingen ook echt als lijst zijn opgemaakt en niet als losse regels met streepjes.
Lees meer uitleg over lijstenAfbeeldingen 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.
Lees meer uitleg over alt-tekstenKlikbare afbeeldingen
Soms is een afbeelding zelf een link of een knop, bijvoorbeeld een logo waarmee je naar de homepage gaat. Dan hoort er een naam bij die zegt waar je terechtkomt of wat er gebeurt, niet hoe het plaatje eruitziet. Dus “Naar de homepage” en niet “blauw rond logo”. De radar toont die naam bij elke klikbare afbeelding en markeert het rood als er geen naam is.
Lees meer uitleg over naam, rol en waardeAfbeeldingen uit
Afbeeldingen worden vervaagd. Kijk of je ontwerp zonder beeld nog te begrijpen is en of de tekst het verhaal alleen kan dragen.
Lees meer uitleg over alt-tekstenTabellen Licentie
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.
Lees meer uitleg over tabellenNamen van links en knoppen
Elke link, knop en elk invoerveld heeft een naam die voorleessoftware hardop noemt. Meestal is dat gewoon de tekst die je ziet, maar niet altijd: bij een knop met alleen een pictogram, bijvoorbeeld een vergrootglas, zit de naam in de code. De radar zet bij elk element die naam in beeld. Zo zie je of iemand die de pagina niet ziet dezelfde informatie krijgt als jij. Links, knoppen en velden zonder naam worden rood gemarkeerd.
Lees meer uitleg over toegankelijke namenLinkteksten
De radar markeert vage links zoals “lees meer” en links zonder tekst. Een goede linktekst vertelt op zichzelf waar je terechtkomt.
Lees meer uitleg over linktekstenAlle links Licentie
Alle links op de pagina in één lijst in het paneel, zoals voorleessoftware 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.
Lees meer uitleg over linktekstenTitels bij ingesloten video's en kaarten Licentie
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.
Lees meer uitleg over titels van iframesPagina in grijstinten
Met één klik wordt de pagina grijs. Zo controleer je of informatie zoals links of foutmeldingen ook zonder kleur te herkennen is.
Lees meer uitleg over het gebruik van kleurTekstcontrast
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.
Lees meer uitleg over tekstcontrastContrast van invoervelden en focus
Dit gaat niet over tekst, maar over de dingen eromheen: de rand van een invoerveld, en het kadertje dat verschijnt als je met de Tab-toets door de pagina loopt. Ook die moeten genoeg verschillen van de achtergrond, anders zie je niet waar je moet typen of waar je bent. De radar loopt de pagina langs en meldt het als het verschil te klein is, of als er helemaal geen kadertje verschijnt.
Lees meer uitleg over contrast van niet-tekstuele onderdelenTaal 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.
Lees meer uitleg over de taal van de paginaAutomatisch invullen van gegevens Licentie
Een browser kan velden zoals naam, adres en e-mailadres vanzelf invullen met gegevens die de bezoeker eerder heeft bewaard. Daarvoor moet in de code staan wat voor gegeven er in het veld hoort. Staat dat er, dan scheelt dat typwerk, en dat helpt vooral mensen die moeilijk typen of die dingen snel vergeten. De radar laat per veld zien of het er staat en waarschuwt als het ontbreekt. Aanpassen doet een developer.
Lees meer uitleg over het invoerdoelLabels bij invoervelden
Bij elk invoerveld hoort een label: het woord ernaast dat vertelt wat je moet invullen, zoals “E-mailadres”. Voorleessoftware noemt dat label zodra iemand in het veld komt. Ontbreekt het, dan hoort die persoon alleen “invoerveld” en weet hij niet wat er moet komen. De radar markeert die velden rood.
Lees meer uitleg over labels bij formulierveldenFoutmeldingen 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.
Lees meer uitleg over foutmeldingen
Tabblad Designer
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.
Lees meer uitleg over tekstcontrastContrast van randen en focus
Meet het contrast van de randen van invoervelden en van de focusstijl (WCAG 1.4.11). De radar zet daarvoor kort focus op elk element en waarschuwt onder 3:1, of als een zichtbare focusstijl helemaal ontbreekt.
Lees meer uitleg over contrast van niet-tekstuele onderdelenLinks 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.
Lees meer uitleg over het gebruik van kleurGrijswaarden (kleurblind-check)
Met één klik wordt de pagina grijs. Zo controleer je of informatie zoals links of foutmeldingen ook zonder kleur te herkennen is.
Lees meer uitleg over het gebruik van kleurDonkere modus Licentie
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 zegt de Radar dat gewoon.
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.
Lees meer uitleg over een zichtbare focusDoelgrootte (24px) Licentie
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.
Lees meer uitleg over doelgrootteGebaren en muis-only bediening Licentie
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.
Lees meer uitleg over toetsenbordbedieningAlleen tekst vergroten (200%)
De radar zet alle tekst op 200% en laat je viewport staan, zoals de instelling “Alleen tekst zoomen” in Firefox. Controleer of er tekst wegvalt, overlapt of buiten beeld raakt en of alles nog te bedienen is.
Lees meer uitleg over tekst vergrotenPagina-zoom 200%
Opent de pagina in een venster van 640 pixels breed. Dat is dezelfde lay-out als 1280 pixels met 200% browserzoom, dus met dezelfde mediaquery’s en dezelfde ingeklapte componenten. Zoom dat venster daarna zelf in om ook de lettergrootte te zien.
Lees meer uitleg over tekst vergrotenZoom geblokkeerd in de code Licentie
Leest de viewport-metatag van de pagina. Staat daar user-scalable=no of een maximum-scale onder de 2, dan kan een bezoeker op zijn telefoon niet naar 200 procent inzoomen (WCAG 1.4.4). De check zegt welke waarde het blokkeert; die mag weg, de tag zelf mag blijven.
Lees meer uitleg over tekst vergrotenTekstafstand (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.
Lees meer uitleg over tekstafstandReflow (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).
Lees meer uitleg over reflowAfbeeldingen uit
Afbeeldingen worden vervaagd. Kijk of je ontwerp zonder beeld nog te begrijpen is en of de tekst het verhaal alleen kan dragen.
Lees meer uitleg over alt-tekstenAutomatische beweging Licentie
Vindt beweging die vanzelf start en langer dan 5 seconden duurt: CSS-animaties, autoplay-video's en marquees. De radar kijkt ook 5 seconden mee naar scriptgestuurde beweging zoals carrousels en tickers.
Lees meer uitleg over automatische bewegingLiniaal 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
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.
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.
Lees meer uitleg over toegankelijke namenARIA-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.
Lees meer uitleg over naam, rol en waardeIframes (titel)
Iframes zonder title of aria-label springen eruit. Een titel is nodig zodat een screenreadergebruiker weet wat er in het kader zit.
Lees meer uitleg over titels van iframesAutocomplete bij persoonlijke gegevens Licentie
Velden die om persoonlijke gegevens vragen horen een autocomplete-attribuut met een geldige waarde te hebben (WCAG 1.3.5). De radar toont de waarde per veld en waarschuwt bij ontbrekende of onbekende waarden.
Lees meer uitleg over het invoerdoelGroepen 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.
Lees meer uitleg over labels bij formulierveldenToegankelijke 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.
Lees meer uitleg over labels bij formulierveldenVerplichte 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.
Lees meer uitleg over labels bij formulierveldenFoutmeldingen 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.
Lees meer uitleg over foutmeldingenPlakken geblokkeerd Licentie
De radar 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 Radar niet zien; test het plakken ook zelf.
Lees meer uitleg over overtollige invoerFocus 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.
Lees meer uitleg over een zichtbare focusTabvolgorde Licentie
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.
Lees meer uitleg over de focusvolgordeDoelgrootte (24px) Licentie
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.
Lees meer uitleg over doelgrootteGebaren en muis-only bediening Licentie
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.
Lees meer uitleg over toetsenbordbedieningAlleen tekst vergroten (200%)
De radar zet alle tekst op 200% en laat je viewport staan, zoals de instelling “Alleen tekst zoomen” in Firefox. Controleer of er tekst wegvalt, overlapt of buiten beeld raakt en of alles nog te bedienen is.
Lees meer uitleg over tekst vergrotenPagina-zoom 200%
Opent de pagina in een venster van 640 pixels breed. Dat is dezelfde lay-out als 1280 pixels met 200% browserzoom, dus met dezelfde mediaquery’s en dezelfde ingeklapte componenten. Zoom dat venster daarna zelf in om ook de lettergrootte te zien.
Lees meer uitleg over tekst vergrotenZoom geblokkeerd in de code Licentie
Leest de viewport-metatag van de pagina. Staat daar user-scalable=no of een maximum-scale onder de 2, dan kan een bezoeker op zijn telefoon niet naar 200 procent inzoomen (WCAG 1.4.4). De check zegt welke waarde het blokkeert; die mag weg, de tag zelf mag blijven.
Lees meer uitleg over tekst vergrotenTekstafstand (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.
Lees meer uitleg over tekstafstandReflow (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).
Lees meer uitleg over reflowTekstcontrast
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.
Lees meer uitleg over tekstcontrastContrast van randen en focus
Meet het contrast van de randen van invoervelden en van de focusstijl (WCAG 1.4.11). De radar zet daarvoor kort focus op elk element en waarschuwt onder 3:1, of als een zichtbare focusstijl helemaal ontbreekt.
Lees meer uitleg over contrast van niet-tekstuele onderdelen
De controles die je elke week doet, in één klik
Als redacteur werk je in het CMS, niet in de code. Toch bepaalt jouw werk een groot deel van de toegankelijkheid: de alt-teksten, de koppenstructuur, de linkteksten, de tabellen. Precies daar gaat het het vaakst mis.
Onze ambitie met het tabblad Redactie is simpel: de controles die je toch al zou moeten doen, zo makkelijk maken dat je ze ook echt doet. Je hoeft geen broncode te lezen en geen developer te vragen. Je klikt de radar aan en ziet meteen welke afbeelding geen alt-tekst heeft, waar een kopniveau wordt overgeslagen en welke link “lees meer” heet.
De radar oordeelt niet voor je. Bij een alt-tekst laat hij zien wat er staat, jij bepaalt of dat klopt bij de afbeelding. Dat is precies het stuk werk dat een automatische scanner nooit voor je kan doen.
Contrast, focus en doelgrootte nakijken zonder plugin
In je ontwerptool ziet alles er goed uit. In de browser komt het aan op de echte kleuren, de echte fonts en het echte gedrag bij zoomen. Daar wil je bij kunnen, ook op een pagina die nog niet af is.
Onze ambitie met het tabblad Designer is om de checks die je normaal over drie tools verdeelt, op één plek te zetten. Meet het contrast met de pipetten, zet de pagina in grijswaarden, forceer een zichtbare focusrand, markeer klikdoelen kleiner dan 24 pixels en zet de tekst op 200% om te zien of je layout dat aankan.
Je hoeft niets te installeren en je ontwerp hoeft niet online te staan. De radar werkt net zo goed op een acceptatieomgeving of op localhost.
Sneller dan de inspector openen
Je weet waar je op moet letten. Wat tijd kost, is het uitzoeken: welke knop heeft nu precies geen toegankelijke naam, wijst die aria-controls wel naar een bestaand id, en in welke volgorde loopt de focus eigenlijk?
Onze ambitie met het tabblad Developer is om die vragen te beantwoorden voordat je de inspector opent. De radar nummert elk focusbaar element in tabvolgorde en markeert positieve tabindex-waarden als fout. Hij toont alle rollen en aria-attributen en laat zien welke referenties nergens op wijzen. Bij hover krijg je tag, id, class, rol, toegankelijke naam en afmeting van elk element.
Handig tijdens het bouwen, en handig bij het oplossen van een auditbevinding: je ziet direct of je aanpassing het gewenste effect heeft.
Waarom een radar en geen scanner?
Een automatische scan vindt hooguit een derde van de toegankelijkheidsproblemen. Die scan zegt je wat er fout is volgens een regel, maar niet of je pagina klopt voor een bezoeker.
WCAG Radar draait dat om. De radar laat zien wat er echt op je pagina staat: welke koppen je hebt, wat er in je alt-teksten staat, waar de focus heen springt. Jij beoordeelt met je eigen ogen of het klopt. Daarmee leer je je eigen site kennen, en dat werkt beter dan een lijst met foutcodes.
De radar vervangt geen volledige audit. Hij helpt je de meest voorkomende fouten zelf op te sporen en op te lossen, zodat er bij een audit minder overblijft.
Krijg duidelijkheid over je digitale toegankelijkheid – zonder stress
Plan een vrijblijvende kennismaking. Geen verplichtingen – wel waardevol inzicht in je risico’s én kansen.
Plan een kennismaking
