Gratis tool: Toegankelijkheid

WCAG 2.2-check voor je website

Bekijk waar je site staat op elk van de 55 succescriteria van WCAG 2.2 niveau A en AA. Elk criterium krijgt een van vier statussen, zodat je ziet wat geautomatiseerde tests hebben gedekt en wat een mens nog moet controleren.

Gratis. Test in ongeveer een minuut tot vijf belangrijke pagina’s.

Wat deze tool controleert

  • Elk criterium van niveau A en AA

    Alle 55 criteria, 31 op niveau A en 24 op niveau AA, in WCAG-volgorde met hun nummer en naam. 4.1.1 Parsen is weggelaten, omdat WCAG 2.2 het als verouderd aanmerkt.

  • Geautomatiseerde resultaten gekoppeld aan criteria

    De regels van axe-core draaien op de pagina die je invoert en op maximaal vier belangrijke pagina’s, en elk resultaat wordt gekoppeld aan de succescriteria die die regel test. Een criterium faalt zodra een van zijn regels op een geteste pagina faalt.

  • Bewijs uit de toetsenbordtest

    Een Tab-test van 40 aanslagen op de eerste pagina levert input voor 2.1.2 Geen toetsenbordval en, als heuristiek die ter beoordeling wordt getoond, voor 2.4.7 Focus zichtbaar.

  • Onbesliste resultaten apart gehouden

    Als een regel niet tot een oordeel komt, bijvoorbeeld bij tekst op een afbeelding, tonen de bijbehorende criteria “Beoordeling nodig” in plaats van geslaagd of niet geslaagd.

  • Zichtbare gaten in plaats van een score

    Criteria die geen enkele geautomatiseerde regel dekt, krijgen de status “Handmatige controle”. Er wordt niets gemiddeld tot een percentage dat zou verbergen wat niet is getest.

Wat de tool niet kan controleren

  • Criteria beoordelen waarvoor menselijk oordeel nodig is, zoals 1.4.10 Reflow, 1.4.11 Contrast van niet-tekstuele content, de 1.2-criteria over ondertiteling en audiodescriptie, en 3.3.1 tot en met 3.3.4 over formulierfouten.
  • Van “Geen automatische fouten” een geslaagd maken. Een regel die is uitgevoerd en geslaagd, dekt alleen wat die regel test.
  • Een conformiteitsclaim, een toegankelijkheidsverklaring of een VPAT opstellen. Conformiteit wordt beoordeeld op volledige pagina’s en complete processen, door mensen.
  • Niveau AAA testen, of meer pagina’s dan de vijf in de scan.
  • De stappen achter een login of een checkout bereiken, waar criteria zoals 3.3.7 Overbodige invoer en 3.3.8 Toegankelijke authenticatie meestal van toepassing zijn.

Waarom het belangrijk is

WCAG is opgebouwd uit succescriteria, en zo beschrijven auditors, inkoopteams en toegankelijkheidsverklaringen een site. Een lijst met falende regels vertelt je wat je moet oplossen. Een overzicht per criterium vertelt je wat je wel en nog niet over de site kunt zeggen.

Geautomatiseerde tools raken minder dan de helft van de criteria van niveau A en AA: axe-core koppelt zijn regels aan ongeveer 25 van de 55. Voor de rest bestaat geen betrouwbare geautomatiseerde test. Software kan niet zien of een foutmelding een verbetering voorstelt (3.3.3) of dat een pagina nog werkt bij een breedte van 320 CSS-pixels (1.4.10). Door die als handmatige controles te tonen, zie je waar nog getest moet worden.

Zelfs een criterium zonder automatische fouten kan falen. Regels voor 1.1.1 Niet-tekstuele content controleren dat een afbeelding alt-tekst heeft; ze kunnen niet zien dat alt="IMG_2041.jpg" nutteloos is voor iemand die de foto niet kan zien.

Zo lees je de resultaten

Niet geslaagd
Minstens één geautomatiseerde regel die bij dit criterium hoort, faalde op een geteste pagina. Dit is een zeker probleem; de toegankelijkheidscheck toont de elementen en pagina’s erachter.
Beoordeling nodig
Een geautomatiseerde controle signaleerde iets waarover die niet kon beslissen, zoals het contrast van tekst op een kleurverloop. Een mens moet naar het element kijken.
Geen automatische fouten
Minstens één axe-core-regel die bij het criterium hoort, is uitgevoerd en geslaagd. Dit is geen conformiteit: de regels dekken maar een deel van wat het criterium vraagt.
Niet geactiveerd
Er bestaan geautomatiseerde regels voor dit criterium, maar niets op de geteste pagina’s gaf ze iets om te controleren, bijvoorbeeld geen video voor de ondertitelingsregels of geen formulieren voor de labelregels. Test het handmatig als je site zulke content elders wel heeft.
Handmatige controle
Geen enkele geautomatiseerde regel dekt dit criterium, dus de scan zegt er niets over, positief noch negatief. Test het handmatig.
Niveau A en niveau AA
Niveau A is het minimum. Beleid dat naar WCAG verwijst, noemt meestal niveau AA, dat elk criterium van niveau A omvat.

Zo los je de meest voorkomende problemen op

  • 4.1.2 Naam, rol, waarde niet geslaagd

    Eigen bedieningselementen die met div- of span-elementen zijn gebouwd (menu’s, tabbladen, accordeons, schakelaars), vertellen hulptechnologie niet wat ze zijn en of ze open staan. Gebruik waar mogelijk een native <button>, geef die een naam en stel aria-expanded of aria-pressed in, zodat de status wordt voorgelezen.

  • 1.3.1 Info en relaties niet geslaagd

    Structuur moet in de markup zitten, niet alleen in de opmaak. Gebruik echte h2- en h3-elementen in plaats van vetgedrukte alinea’s, ul of ol voor lijsten, th met scope voor tabelkoppen, en labels of fieldset met legend voor groepen formuliervelden.

  • 3.1.1 Taal van de pagina niet geslaagd

    Voeg een lang-attribuut toe aan het html-element, bijvoorbeeld <html lang="en">. WordPress-thema’s geven het normaal weer met language_attributes(); in een Shopify-thema gebruik je <html lang="{{ request.locale.iso_code }}"> in layout/theme.liquid.

  • 2.5.8 Grootte van het aanwijsgebied (minimum) niet geslaagd

    Kleine iconen en dicht op elkaar staande links zijn moeilijk met een vinger te raken. Maak elk aanwijsgebied minstens 24 × 24 CSS-pixels, of zet kleine aanwijsgebieden zo ver uit elkaar dat een cirkel van 24 px rond het midden van elk gebied geen ander aanwijsgebied overlapt. Padding vergroot het aanwijsgebied zonder het icoon te veranderen.

  • De handmatige controles doorlopen

    Begin met de snelle. Voor 1.4.10 Reflow zoom je een browservenster van 1280 px breed in tot 400% en controleer je dat je nergens horizontaal hoeft te scrollen. Voor 2.4.7 en 2.4.11 tab je door de pagina en controleer je dat de focus altijd zichtbaar is en nooit verdwijnt achter een sticky header of cookiebanner. Voor 3.3.1 verstuur je een formulier met fouten en kijk je of de fouten duidelijk in tekst worden beschreven.

Vragen over deze tool

Wat is er in WCAG 2.2 veranderd op niveau A en AA?

Er zijn zes criteria toegevoegd: 2.4.11 Focus niet bedekt (minimum), 2.5.7 Sleepbewegingen, 2.5.8 Grootte van het aanwijsgebied (minimum), 3.2.6 Consistente hulp, 3.3.7 Overbodige invoer en 3.3.8 Toegankelijke authenticatie (minimum). WCAG 2.2 voegt ook drie criteria op niveau AAA toe en schrapt 4.1.1 Parsen.

Waarom staat 4.1.1 Parsen er niet bij?

WCAG 2.2 markeert 4.1.1 Parsen als verouderd en schrapt het, omdat browsers en hulptechnologieën niet meer afhankelijk zijn van de markupfouten die het behandelde. Het W3C merkt op dat het voor WCAG 2.0 en 2.1 nu bij HTML-content altijd als voldaan wordt beschouwd.

Voldoe ik met WCAG 2.2 ook aan WCAG 2.1?

Ja. WCAG 2.2 is achterwaarts compatibel: content die voldoet aan 2.2, voldoet ook aan 2.1 en 2.0. Een test op 2.2 dekt dus ook de oudere versies waarnaar veel beleid nog verwijst.

Kan ik dit gebruiken om een toegankelijkheidsverklaring of een VPAT te schrijven?

Het is een startpunt, geen conformiteitsrapport. Voor een verklaring of VPAT moet elk criterium worden beoordeeld, de meeste door een mens; de lijsten “Handmatige controle” en “Beoordeling nodig” laten zien welke criteria dat nog nodig hebben.

Waarom staat er bij zoveel criteria “Handmatige controle”?

Omdat er geen geautomatiseerde regel voor bestaat. Vragen zoals of een tijdslimiet kan worden verlengd, of hulp op elke pagina op dezelfde plek staat of dat een login een geheugentest vereist, hangen af van hoe mensen de site gebruiken, niet van markup die een regel kan lezen.

Bronnen

Gerelateerde tools

Het Toegankelijkheidsrapport ($174, eenmalig) begint bij de volledige gratis scan en voegt meer pagina’s toe, de aanpassing voor elke bevinding, een pdf en hertests om je oplossingen te controleren.

Over het Toegankelijkheidsrapport