Een interactieve WCAG 2.2-checklist van alle 55 succescriteria van niveau A en AA, elk met een eenvoudige uitleg, een test en een oplossing, plus een WCAG-contrastchecker.
Een WCAG-checklist voor de meeste sites omvat de 55 succescriteria van niveau A en AA in WCAG 2.2 (4.1.1 Parsing is geschrapt). De belangrijkste controles: tekstcontrast van minstens 4.5:1 (3:1 voor grote tekst), volledige bediening met het toetsenbord, zichtbare focus, gelabelde velden, ondertiteling en klikdoelen van minstens 24 bij 24 CSS-pixels.
WCAG 2.2 in één oogopslag
Dit is de werkversie van een toegankelijkheidsreview: elk succescriterium van niveau A en AA in WCAG 2.2, gegroepeerd per principe, elk met wat het in gewone woorden betekent, hoe u het in een paar minuten test en een codeoplossing waar code helpt. Vink onderdelen af terwijl u werkt, filter op niveau of principe en print het resultaat.
Voldoen aan niveau AA betekent dat u aan 55 criteria voldoet: 31 op niveau A en 24 op niveau AA. WCAG 2.2 telt in totaal 86 criteria als u de 31 onderdelen van niveau AAA meerekent, nadat 4.1.1 Parsing als verouderd is gemarkeerd en geschrapt.
Criterium 1.4.3 vraagt 4.5:1 tussen normale tekst en de achtergrond, en 3:1 voor grote tekst, dat wil zeggen minstens 18 punt (24 CSS-pixels) of 14 punt vet (ongeveer 18.66 CSS-pixels). Criterium 1.4.11 vraagt 3:1 voor iconen, invoerranden en focusindicatoren.
Geen enkele checklist kan dat beloven. Wetten verschillen per land en sector, en sommige leunen op WCAG 2.1 of op eigen normen. Gebruik deze pagina om barrières te vinden en op te lossen, en vraag juridisch advies voor vragen over compliance.
WCAG 2.2 voegde negen criteria toe, waarvan zes op A of AA: Focus niet verborgen (minimum), Sleepbewegingen, Grootte van het aanwijsgebied (minimum), Consistente hulp, Overbodige invoer en Toegankelijke authenticatie (minimum). Het schrapte ook 4.1.1 Parsing.
Elke kleur wordt omgezet naar relatieve luminantie door de rode, groene en blauwe kanalen te lineariseren en ze te wegen met 0.2126, 0.7152 en 0.0722. De verhouding is de lichtere luminantie plus 0.05, gedeeld door de donkere plus 0.05, wat een waarde van 1:1 tot 21:1 oplevert.
Verborgen tot hij focus krijgt, daarna bovenaan zichtbaar. Druk op Tab in het resultaat om hem te zien.
focus-visible toont de ring voor toetsenbordgebruikers. De kleur van de outline moet 3:1 halen tegen de achtergrond.
scroll-padding reserveert ruimte zodat elementen met focus die in beeld scrollen niet onder de balk verdwijnen.
Vergroot kleine icoonknoppen met padding tot 24 bij 24 CSS-pixels. 44 pixels is het strengere AAA-doel en vriendelijker op telefoons.
Plak dit in de dev tools. Dit zijn de waarden die het criterium noemt; de inhoud moet leesbaar blijven als ze zijn toegepast.
De melding is tekst, staat naast het veld, legt uit hoe u het oplost en is gekoppeld met aria-describedby.
Een role=status-gebied wordt beleefd voorgelezen wanneer de tekst verandert, zonder de focus te verplaatsen.
Automatisch spelende beweging stoppen voor mensen die om minder beweging vragen, helpt ook bij Pauzeren, stoppen, verbergen.
Juiste autocomplete-waarden en geen plakblokkade laten mensen inloggen zonder een wachtwoord te hoeven onthouden.
Afbeeldingen, iconen en bedieningselementen hebben een tekstalternatief; decoratie is verborgen.
Controleer elke img-alt, de naam van elke icoonknop en elke samenvatting van een grafiek.
Louter geluid krijgt een transcript; stille video krijgt een transcript of geluidsspoor.
Zoek elke podcast of stille clip en kijk of er een alternatief is.
Opgenomen video met geluid heeft gesynchroniseerde ondertitels.
Speel video's af met ondertitels aan; controleer de nauwkeurigheid, niet alleen of ze er zijn.
Puur visuele informatie in video wordt beschreven of als tekst aangeboden.
Kijk met gesloten ogen; gaat er iets belangrijks verloren?
Livestreams met geluid hebben ondertitels.
Controleer of de livespeler of dienst realtime ondertiteling ondersteunt.
Opgenomen video heeft audiodescriptie waar beelden betekenis dragen.
Zoek een beschreven versie of voice-over die tekst op het scherm behandelt.
Koppen, lijsten, tabellen en labels zijn opgemaakt met markup, niet alleen met styling.
Inspecteer koppen, lijsten, tabelkoppen en labelkoppelingen.
De leesvolgorde in de code komt overeen met de betekenis.
Zet CSS uit of gebruik de bladermodus van een schermlezer en lees van boven naar beneden.
Instructies leunen niet alleen op vorm, kleur, grootte, positie of geluid.
Zoek in de tekst naar zinnen als de ronde knop of aan de rechterkant.
Inhoud werkt in staande en liggende stand, tenzij één ervan essentieel is.
Draai een telefoon of emuleer beide standen.
Velden voor persoonsgegevens geven hun doel aan zodat browsers automatisch kunnen invullen.
Controleer of velden voor naam, e-mail, telefoon en adres autocomplete-waarden hebben.
Kleur is nooit de enige manier om betekenis, status of een link te tonen.
Bekijk in grijstinten; zijn fouten en links nog te onderscheiden?
Geluid dat vanzelf langer dan 3 seconden speelt, kan worden gepauzeerd of gedempt.
Laad elke pagina met het geluid aan.
Het tekstcontrast is minstens 4.5:1, of 3:1 voor grote tekst.
Meet paren van tekst en achtergrond met de contrastchecker hieronder.
Tekst kan tot 200 procent schalen zonder verlies van inhoud of functie.
Zoom in tot 200 procent; niets wordt afgesneden of overlapt.
Er wordt echte tekst gebruikt in plaats van afbeeldingen van tekst, logo's uitgezonderd.
Zoek naar banners en knoppen die afbeeldingen zijn.
Inhoud past op 320 CSS-pixels breed zonder in twee richtingen te scrollen.
Zoom in tot 400 procent bij een breedte van 1280 pixels.
Iconen, veldranden, focusringen en onderdelen van grafieken halen 3:1.
Meet randen en iconen tegen hun omgeving.
Niets gaat stuk als de regel-, alinea-, letter- en woordafstand wordt vergroot.
Pas de bookmarklet voor tekstafstand of de CSS-override hieronder toe.
Tooltips kunnen worden gesloten, er kan overheen worden bewogen en ze blijven staan tot u wegbeweegt.
Beweeg over een tooltip, ga erin en druk op Escape.
Alles werkt met alleen een toetsenbord.
Koppel de muis los en voer elke taak uit.
De focus kan altijd van elk component af bewegen.
Tab naar widgets, embeds en dialoogvensters en tab er weer uit.
Sneltoetsen van één toets kunnen worden uitgezet, opnieuw toegewezen of werken alleen bij focus.
Maak een lijst van sneltoetsen die een letter of cijfer gebruiken zonder modifier.
Tijdslimieten kunnen worden uitgezet, aangepast of verlengd.
Zoek sessietime-outs en stappen met een tijdslimiet.
Bewegende, knipperende of automatisch bijwerkende inhoud kan worden gepauzeerd.
Zoek naar carrousels, tickers en geanimeerde achtergronden.
Niets flitst meer dan drie keer per seconde.
Controleer video en animatie op stroboscoopeffecten.
Een skiplink of landmarks laten gebruikers herhaalde blokken overslaan.
Druk na het laden één keer op Tab en zoek naar Naar inhoud gaan.
Elke pagina heeft een titel die haar beschrijft.
Lees de titels van de browsertabbladen op de hele site.
De focus beweegt in een volgorde die betekenis en bruikbaarheid intact laat.
Tab erdoorheen en let op sprongen.
De linktekst zegt, samen met de context, waar de link heen gaat.
Maak een lijst van alle links; markeer kale Klik hier en Lees meer.
Er is meer dan één manier om een pagina te vinden, zoals menu en zoeken of een sitemap.
Controleer op zoeken, een sitemap of een volledig menu.
Koppen en labels beschrijven hun onderwerp of doel.
Lees alleen de kopstructuur; is die logisch?
De toetsenbordfocusindicator is zichtbaar.
Tab erdoorheen; u moet altijd zien waar u bent.
Een element met focus wordt niet volledig verborgen door sticky balken of banners.
Tab terwijl een cookiebanner en een sticky header zichtbaar zijn.
Pad- of meerpuntsgebaren hebben een alternatief met één aanwijzer.
Controleer knijp-, veeg- en tekeninteracties op knoppen.
Acties starten bij loslaten, of kunnen worden afgebroken of ongedaan gemaakt.
Druk in, sleep weg en laat los; er mag niets gebeuren.
De toegankelijke naam bevat de zichtbare labeltekst.
Vergelijk zichtbare labels met berekende namen in de dev tools.
Functies met schudden of kantelen hebben een knop als alternatief en kunnen worden uitgezet.
Zoek naar functies die op apparaatbeweging reageren.
Alles wat met slepen gebeurt, kan ook met losse klikken of tikken.
Probeer schuifregelaars, sorteerbare lijsten en kaarten zonder te slepen.
Aanwijsgebieden zijn minstens 24 bij 24 CSS-pixels, of zo verspreid dat een cirkel van 24 pixels andere niet overlapt, met uitzonderingen.
Meet kleine iconen en inline bedieningselementen.
De pagina geeft haar hoofdtaal aan.
Controleer het lang-attribuut op het html-element.
Passages in een andere taal zijn gemarkeerd met lang.
Zoek citaten of zinnen in andere talen.
Focus op een element verandert de context niet.
Tab naar elk bedieningselement; er mag niets worden verzonden of genavigeerd.
Het wijzigen van een instelling verandert de context niet zonder waarschuwing.
Wijzig keuzelijsten en keuzerondjes; let op onverwachte navigatie.
Herhaalde navigatie houdt dezelfde relatieve volgorde.
Vergelijk menu's op meerdere pagina's.
Componenten met dezelfde functie krijgen hetzelfde label.
Vergelijk de bediening voor zoeken, winkelwagen en downloaden op verschillende pagina's.
Hulpopties die terugkeren, staan in dezelfde relatieve volgorde.
Vergelijk waar contact-, chat- of hulplinks op elke pagina staan.
Invoerfouten worden geïdentificeerd en in tekst beschreven.
Verzend formulieren leeg en met foute gegevens.
Velden hebben labels of instructies waar invoer nodig is.
Controleer of elk veld een zichtbaar label en formaathints heeft.
Als een oplossing bekend is, stelt de foutmelding die voor.
Lees de fouttekst; staat erin hoe u de invoer corrigeert?
Belangrijke inzendingen kunnen worden teruggedraaid, gecontroleerd of bevestigd.
Loop het afrekenproces en het verwijderen van een account door.
Informatie die al in een proces is ingevoerd, wordt ingevuld of is selecteerbaar.
Zoek naar herhaalde adres- of e-mailvelden binnen één proces.
Inloggen vraagt geen geheugen- of puzzeltest zonder alternatief, en plakken is toegestaan.
Probeer een wachtwoord te plakken; controleer of er een optie zonder puzzel is.
Eigen bedieningselementen geven hun naam, rol en status door aan hulptechnologie.
Inspecteer eigen widgets in de toegankelijkheidsboom.
Statusberichten worden voorgelezen zonder de focus te verplaatsen.
Activeer toevoegen aan winkelwagen of zoekresultaten en luister.
Waarneembaar
Bedienbaar
Begrijpelijk
Robuust
Interactieve WCAG 2.2-checklist voor A en AA
Printen of opslaan als PDF
Filteren op niveau
Filteren op principe
Alle niveaus
Niveau {level}
Alle principes
{ticked} van {shown} getoonde criteria afgevinkt. Vinkjes blijven alleen bewaard zolang dit tabblad open is.
Test:
Geslaagd
Gezakt
Kleurkiezer {label}
Hex {label}
WCAG-kleurcontrastchecker
Gebruikt de formule voor relatieve luminantie uit de definities van WCAG 2.2. Voer hexkleuren van zes tekens in.
Tekst
Achtergrond
Voorbeeld van normale tekst, 16 pixels regular.
Voorbeeld van grote tekst, 24 pixels.
Contrastverhouding {ratio}:1
Voer twee geldige hexkleuren in, zoals #1f2937.
Resultaat tegenover de AA-drempels
Gebruik
Vereist
Resultaat
Normale tekst (1.4.3)
Grote tekst (1.4.3)
Iconen, randen, focusringen (1.4.11)
Normale tekst, AAA (1.4.6)
Gratis beginnen · Geen creditcard nodig