What's new in WCAG Radar

Toegevoegd

• Een check kan meer dan één verwijzing tonen. Naast het achtergrondartikel ("Meer uitleg") mag een check nu extra links meegeven, elk met een eigen linktekst. Ze staan op een eigen regel onder de samenvatting en volgen de taal van het paneel, net als het artikel: bestaat een pagina niet in die taal, dan blijft de link weg.
• **"ARIA-rollen en -attributen" wijst naar de ARIA-referentie en de quiz voor developers.** Het artikel legt uit wat rollen en attributen doen, de referentie is om in op te zoeken wat een rol precies verlangt, en de quiz laat je merken of je het ook echt weet. Beide bestaan in het Nederlands en het Engels.

Opgelost

• Het label van een markering kon buiten beeld vallen. Het staat standaard boven het element en wijkt naar onderen als daar geen ruimte is. Bij een element zo groot als het venster paste het nergens: de achtergrondvideo op architectenregister.nl kreeg zijn label op de pixel onder de onderrand. De check vond de video dus wel, maar je zag er niets van. Past het label boven noch onder, dan staat het nu binnenin het element, linksboven.

Gewijzigd

• "Automatische beweging" ziet nu ook video's die met script starten. De check keek naar video[autoplay]. Zet een site de video aan met JavaScript, dan viel hij buiten de boot, terwijl de bezoeker precies hetzelfde ziet: beweging die hij niet zelf begon. Speelt een video zonder bediening, dan telt hij mee. Speelt hij mét bediening, dan niet: die kan de bezoeker zelf gestart hebben, en pauzeren kan sowieso.
• De samenvatting benoemt wat er beweegt, bijvoorbeeld "CSS-animaties: 1, video's die vanzelf spelen: 1". Alleen een totaal zei te weinig.

Opgelost

• "Afbeeldingen uit" liet het meeste beeld gewoon staan. De check pakte alleen <img>. Een logo als inline svg bleef dus staan, en op de inlogpagina van toegankelijkheidsverklaring.nl gebeurde er helemaal niets: daar staat geen enkele <img>, alleen vier svg's. Dan lijkt het alsof de pagina zonder beeld prima werkt, terwijl je het beeld nog gewoon ziet.

De check vervaagt nu ook svg, video, canvas, object, embed, input type="image" en alles met role="img". Achtergrondafbeeldingen uit CSS worden opgezocht en weggehaald, ook die op ::before en ::after. Die krijgen geen filter maar verliezen hun afbeelding, want een filter op zo'n element zou de tekst erop meenemen en dan kun je juist niet beoordelen of het verhaal zonder beeld nog staat. Een gradient blijft staan: dat is opmaak, geen afbeelding.

De samenvatting telt nu hoeveel beeld er is uitgezet.

Gewijzigd

• "Pagina-zoom 200%" zoomt nu zelf, je hoeft niets meer te doen. De check heette "Pagina-zoom 200% (640 px)" en opende een venster van 640 pixels, met de instructie om daar zelf Control + of Command + in te drukken. Dat werkte averechts. Browserzoom geldt per site, dus je zoomde ook het tabblad in waar de Radar staat, en het paneel schoof uit beeld. Bovendien is 640 pixels een maat waarop niemand test.

Nu opent de check een venster van normale grootte met daarin een kader van de halve breedte, twee keer zo groot geschaald. In dat kader gelden de mediaquery's van de smalle viewport, en de tekst heeft ook echt het formaat dat je bezoeker krijgt. Precies wat browserzoom doet, zonder dat je iets hoeft in te drukken.

Getest: zoom: 2 op html schakelt de mediaquery's níet om, een geschaald kader wel. Laat een site zich niet insluiten, dan valt de check terug op het oude gedrag: de pagina zelf in een smal venster.

Opgelost

• Grijswaarden maakte ook de Radar zelf grijs. Het filter stond op html en het paneel hangt daaronder, dus de magenta accenten en de kleurstalen verloren hun kleur. Meten met gereedschap dat zelf geen kleur meer heeft werkt niet. Het filter ligt nu op de pagina en slaat het paneel over.

Gewijzigd

• "Element-info bij hover" is een kaart geworden. De tooltip was één regel die begon met de tag, het id en de hele reeks classes. Bij een site met utility-classes vulde die reeks de halve tooltip, en dan stond wat er werkelijk toe doet ergens achteraan. De kaart toont nu per regel één eigenschap, met de naam links en de waarde rechts: - Naam met de bron erbij, dus of hij uit een label, aria-label, alt-tekst of alleen uit een placeholder komt. Een zwakke bron kleurt magenta. - Rol in gewone woorden, met daarbij of die uit het role-attribuut komt of uit het element zelf. - Kopniveau bij koppen. - Met Tab te bereiken, met de tabindex erbij als die er staat. - Toestand: verborgen voor hulpsoftware, uitgeschakeld, verplicht, ongeldig, en de aria-waarden expanded, checked, selected, pressed en current. - Taal, alleen als die afwijkt van de pagina. - Tekstcontrast met twee kleurstalen en de eis die erbij hoort. Classes en id's staan er niet meer op. De check heeft nu ook een link naar het artikel over 4.1.2 naam, rol, waarde.

Gewijzigd (Engels)

• De Engelse uitleg bij een pictogram als naam vertelt nu ook wát je dan hoort: bij een icoonfont meestal alleen de rol, bij een emoji de codenaam van het teken.

Toegevoegd

• De Engelse Radar verwijst nu overal naar een Engels artikel. Er stonden er 5; nu 28. Alle 25 checks die naar een succescriterium verwijzen hebben in beide talen een link, dus je krijgt nooit meer een check zonder "Meer uitleg". Nederlands ging van 25 naar 28 artikelen.
• Drie artikelen staan alvast klaar voor checks die er nog niet zijn: 2.5.3 label in naam, 3.1.2 taal van onderdelen en 4.1.3 statusberichten.

Opgelost

• Weggeclipte elementen werden gemeten alsof je ze ziet. Een skiplink staat er met het visually-hidden-patroon: de doos is gewoon 26 bij 26 pixels, maar clip knijpt hem dicht tot je hem focust. "Doelgrootte" toonde die 26 bij 26 pixels, een maat die niemand voor zich ziet. De check meet zo'n doel nu in de staat waarin je het kunt aanwijzen, dus met focus erop, en zet "bij focus" achter de afmeting. Op toegankelijkheidsverklaring.nl wordt de skiplink daarmee 155 bij 59 pixels. Blijft een element ook bij focus weggeclipt, dan is het geen doel en slaat de check het over.
• "Contrast van randen en focus" meldde een ratio bij onzichtbare links. Blijft een element ook mét focus weggeclipt, dan valt er niets te zien en dus niets te meten. Die elementen laat de check nu weg.

Opgelost

• Focusringen met een transition werden verkeerd gemeten. "Contrast van randen en focus" zet kort focus op elk element en leest daarna de outline. Laat een site de ring invloeien met een CSS-transition, dan geeft de browser op dat moment nog de beginstand: de kleur van vóór de focus. Zo meldde de lens op toegankelijkheidsverklaring.nl zes ringen van 1:1, terwijl je met Tab een duidelijke blauwe rand ziet. De check zet transitions en animaties nu even uit, zodat hij de eindstand meet. Van de zes meldingen bleven er drie over, en die kloppen: de blauwe ring op de magenta menubalk haalt 1.21:1.
• Een focusring binnen het element werd tegen de verkeerde kleur gemeten. Bij een negatieve outline-offset ligt de ring over het element heen. De lens vergelijkt hem nu met de achtergrond van het element zelf, niet met de pagina eromheen. Een witte ring in een zwarte knop op een witte pagina is dus niet langer een valse melding.

Opgelost

• Doorzichtige velden werden overgeslagen. Een custom checkbox of radio legt het echte invoerveld met opacity: 0 over een getekend vakje heen. De Radar zag zo'n veld als onzichtbaar en sloeg het over: geen markering, geen naam, ook geen foutmelding. Terwijl het veld gewoon focusbaar is en wordt voorgelezen. "Toegankelijke naam bij formuliervelden", "Toon toegankelijke naam" en "Leesvolgorde" nemen deze velden nu mee. Gevonden op loket.overijssel.nl, waar twee checkboxen daardoor onzichtbaar bleven voor de Radar. Checks over kleur, contrast en afmeting kijken nog wel naar wat je echt ziet.

Gewijzigd

• **"Foutmeldingen bij formuliervelden" staat niet meer op het tabblad Redactie.** De uitkomst gaat volledig over aria-describedby, aria-errormessage en aria-invalid. Daar kan een redacteur niets mee. De check blijft ongewijzigd op Developer staan.

Toegevoegd

• Achtergrondartikelen per taal. De Engelse Radar liet bij een bevinding helemaal geen "meer uitleg" zien, omdat alle artikelen Nederlands waren. Nu heeft elke taal zijn eigen artikellijst. Bestaat er over een criterium nog geen artikel in jouw taal, dan verschijnt er geen link; je krijgt dus nooit uitleg in een taal die je niet leest.
• Een taal toevoegen is één bestand: src/locales/<taal>.js. De build, de bookmarklets, de extensie en de tests lezen het aanbod uit die map.

Opgelost

• Zes van de 25 artikellinks waren stuk. Ze wezen naar een slug die niet bestaat, onder meer bij foutmeldingen, beweging, gebaren, autocomplete, contrast van niet-tekstuele content en geblokkeerd plakken. articles.test.js controleert voortaan of elke link bestaat.
• Wisselde je in het Engels van tabblad, dan verscheen de Nederlandse ondertitel ("Voor designers" in plaats van "For designers").
• De artikellinks gaan rechtstreeks naar www.properaccess.nl in plaats van via een omleiding.

Gewijzigd

• De link "Versie X" onderin het paneel, en de link in de update-regel bovenin, gaan nu naar een eigen pagina: testtoegankelijkheid.nl/wcag-radar/changelog. Daar staat de volledige versiegeschiedenis. Eerder sprong de link naar een stuk van de Radar-pagina waar de lijst met wijzigingen niet verscheen.

Toegevoegd

• Nieuwe check Pagina-zoom 200% (640 px) onder "Pagina aanpassen". Die opent de pagina in een venster van 640 CSS pixels breed, en dat is precies de layout die je krijgt op 1280 pixels met 200% browserzoom. Zo test je de zoomkant van 1.4.4 met dezelfde mediaquery's en dezelfde reflow als bij Control + of Command +.

Gewijzigd

• De check "Tekst vergroten (200%)" heet nu Alleen tekst vergroten (200%), want dat is wat hij doet: de tekst schalen en de viewport laten staan, zoals "Alleen tekst zoomen" in Firefox.
• Die check schaalt nu ook formulierelementen, en hij schaalt de wortel van het document mee. Daardoor lopen maten in em en rem mee, net als bij echte tekstzoom. Eerder bleven ingevulde velden, keuzelijsten en knoppen op hun oorspronkelijke grootte staan.
• Het paneel wordt niet langer paginabreed bij een lage viewport. Op 1280 pixels met 200% browserzoom houd je ongeveer 400 pixels hoogte over; het paneel bleef daar onderaan over de volle breedte staan en dekte de pagina af. Het blijft nu een smalle kolom rechts. Alleen onder 520 pixels breed, zoals bij de reflow-test, dokt het paneel nog onderaan.

Het versienummer springt hier van 1.0.0 naar 2.19.0. Dat is een keuze, geen gevolg van een grote wijziging: er is niets gebroken en niemand hoeft zijn bookmarklet opnieuw te slepen.

Toegevoegd

• Het laatste cijfer loopt automatisch op bij elke wijziging aan de bron.

Gewijzigd

• De "nieuw"-regel in het paneel verschijnt nu bij een nieuwe highlight-tekst in plaats van bij een nieuw versienummer. Zo levert een automatische ophoging geen loze melding op.
• De check Tekst contrast beoordeelt een glyph uit een icoonfont niet langer als tekst. Zo'n teken uit de private use area (bijvoorbeeld U+F109 in het font crisp-icons) staat wel in een tekstknoop, maar het is een tekening. De eis is daar 3:1 (1.4.11 niet-tekstuele content) in plaats van 4,5:1, en de samenvatting telt die pictogrammen apart. Eerder werden stappen-iconen op 3,04:1 onterecht als fout gemarkeerd.
• De check Foutmeldingen bij formuliervelden vindt nu ook meldingen zonder enig codesignaal. Naast role="alert", aria-live en een class of id als error/invalid kijkt de lens naar velden die zelf naar een melding wijzen, en naar rode tekst vlak bij een invoerveld. Dat laatste is nodig bij sites waarvan het framework genummerde klassen uitspuugt (class="text", class="stap7") en geen ARIA gebruikt: daar zag de lens eerst nul foutmeldingen terwijl er een rode melding op het scherm stond. De samenvatting vertelt hoeveel meldingen alleen aan de kleur herkend zijn. Nieuw is ook de fout op een veld dat op aria-invalid="true" staat zonder gekoppelde melding.
• De check Autocomplete keurt off en on niet meer goed: die waarden benoemen het doel van het veld niet (WCAG 1.3.5). Ook een waarde die niet bij het veld past (zoals name op een e-mailveld) is nu een waarschuwing. username webauthn op een loginveld wordt juist herkend als geldig.

Eerste genummerde versie. De Radar draaide al sinds 5 juli 2026 live; alles daarvoor is ongenummerd uitgebracht en staat in de git-historie van wcag-radar/.

Gewijzigd

• Een pictogram-naam als toegankelijke naam (bijvoorbeeld icon-arrow) telt nu als fout, ook in de linkchecks.
• Een placeholder telt nu mee als toegankelijke naam.

Toegevoegd

• Versienummer in de voet van het paneel, met link naar deze changelog.
• Eenmalige "nieuw sinds je vorige keer"-regel bovenin het paneel na een update.