Checklist WCAG 2.2 interattiva con tutti i 55 criteri di successo A e AA, ognuno con significato semplice, test e correzione, più un verificatore di contrasto.
Per la maggior parte dei siti una checklist WCAG copre i 55 criteri di successo di livello A e AA delle WCAG 2.2 (il 4.1.1 Parsing è stato rimosso). Controlli chiave: contrasto del testo di almeno 4.5:1 (3:1 per il testo grande), uso completo da tastiera, focus visibile, campi con etichetta, sottotitoli e target di almeno 24 per 24 pixel CSS.
WCAG 2.2 in sintesi
Questa è la versione operativa di una verifica di accessibilità: ogni criterio di successo di livello A e AA delle WCAG 2.2, raggruppato per principio, ognuno con il suo significato in parole semplici, come testarlo in pochi minuti e una correzione nel codice quando il codice aiuta. Spunta le voci man mano, filtra per livello o principio e stampa il risultato.
Essere conformi al livello AA significa soddisfare 55 criteri: 31 di livello A e 24 di livello AA. Le WCAG 2.2 contano 86 criteri in totale includendo le 31 voci di livello AAA, dopo che il 4.1.1 Parsing è stato dichiarato obsoleto e rimosso.
Il criterio 1.4.3 chiede 4.5:1 tra il testo normale e il suo sfondo e 3:1 per il testo grande, cioè di almeno 18 punti (24 pixel CSS) o 14 punti in grassetto (circa 18.66 pixel CSS). Il criterio 1.4.11 chiede 3:1 per icone, bordi dei campi e indicatori di focus.
Nessuna checklist può garantirlo. Le leggi variano per paese e settore, e alcune si basano sulle WCAG 2.1 o su standard propri. Usa questa pagina per trovare e rimuovere le barriere, e rivolgiti a un legale per le questioni di conformità.
Le WCAG 2.2 hanno aggiunto nove criteri, sei dei quali di livello A o AA: Focus non oscurato (minimo), Movimenti di trascinamento, Dimensione del target (minima), Aiuto coerente, Inserimento ridondante e Autenticazione accessibile (minima). Hanno anche rimosso il 4.1.1 Parsing.
Ogni colore viene convertito in luminanza relativa linearizzando i canali rosso, verde e blu e pesandoli 0.2126, 0.7152 e 0.0722. Il rapporto è la luminanza più chiara più 0.05, divisa per quella più scura più 0.05, e dà un valore da 1:1 a 21:1.
Nascosto finché non riceve il focus, poi mostrato in alto. Premi Tab dentro il risultato per vederlo.
focus-visible mostra l'anello agli utenti da tastiera. Il colore dell'outline dovrebbe raggiungere 3:1 rispetto allo sfondo.
scroll-padding riserva spazio in modo che gli elementi con focus portati in vista non finiscano nascosti sotto la barra.
Aumenta il padding dei piccoli pulsanti a icona fino a 24 per 24 pixel CSS. 44 pixel è il target AAA più severo e più comodo sui telefoni.
Incolla questo negli strumenti per sviluppatori. Sono i valori indicati dal criterio: il contenuto deve restare leggibile quando vengono applicati.
Il messaggio è testo, sta accanto al campo, spiega come correggere ed è collegato con aria-describedby.
Una regione role=status viene annunciata in modo non invasivo quando il suo testo cambia, senza spostare il focus.
Fermare il movimento in riproduzione automatica per chi chiede meno animazioni aiuta anche con Pausa, stop, nascondi.
Valori autocomplete corretti e nessun blocco dell'incolla permettono di accedere senza ricordare una password.
Immagini, icone e controlli hanno un'alternativa testuale; gli elementi decorativi sono nascosti.
Controlla ogni alt delle img, il nome di ogni pulsante a icona e il riepilogo di ogni grafico.
Il solo audio ha una trascrizione; il video muto ha una trascrizione o una traccia audio.
Trova ogni podcast o clip muta e cerca la sua alternativa.
I video registrati con audio hanno sottotitoli sincronizzati.
Riproduci i video con i sottotitoli attivi; verifica che siano accurati, non solo presenti.
Le informazioni solo visive del video sono descritte o offerte come testo.
Guarda a occhi chiusi: si perde qualcosa di importante?
Le dirette con audio hanno i sottotitoli.
Verifica che il player o il servizio di diretta supporti i sottotitoli in tempo reale.
I video registrati hanno l'audiodescrizione quando le immagini trasmettono significato.
Cerca una versione audiodescritta o una narrazione che copra il testo a schermo.
Titoli, elenchi, tabelle ed etichette sono marcati nel codice, non solo stilizzati.
Ispeziona titoli, elenchi, intestazioni delle tabelle e associazioni delle etichette.
L'ordine di lettura nel codice corrisponde al significato.
Disattiva il CSS o usa la modalità di navigazione di uno screen reader e leggi dall'alto in basso.
Le istruzioni non si basano solo su forma, colore, dimensione, posizione o suono.
Cerca nei testi frasi come il pulsante rotondo o sulla destra.
Il contenuto funziona in verticale e in orizzontale, salvo che uno dei due sia essenziale.
Ruota un telefono o emula entrambi gli orientamenti.
I campi con dati personali dichiarano il loro scopo, così i browser possono compilarli automaticamente.
Verifica che i campi nome, email, telefono e indirizzo abbiano valori autocomplete.
Il colore non è mai l'unico modo per indicare un significato, uno stato o un link.
Guarda la pagina in scala di grigi: errori e link si distinguono ancora?
Un suono che parte da solo per più di 3 secondi può essere messo in pausa o silenziato.
Carica ogni pagina con l'audio attivo.
Il contrasto del testo è di almeno 4.5:1, o 3:1 per il testo grande.
Misura le coppie di testo e sfondo con il verificatore di contrasto qui sotto.
Il testo può essere ingrandito al 200 percento senza perdita di contenuti o funzionalità.
Zoom al 200 percento: niente tagliato o sovrapposto.
Si usa testo vero invece di immagini di testo, loghi a parte.
Cerca banner e pulsanti che sono immagini.
Il contenuto sta in 320 pixel CSS di larghezza senza scorrimento in due direzioni.
Zoom al 400 percento con una larghezza di 1280 pixel.
Icone, bordi dei campi, anelli di focus e parti dei grafici raggiungono 3:1.
Misura bordi e icone rispetto agli elementi vicini.
Nulla si rompe quando si aumenta la spaziatura tra righe, paragrafi, lettere e parole.
Applica il bookmarklet per la spaziatura del testo o l'override CSS qui sotto.
I tooltip possono essere chiusi, si possono sorvolare e restano finché non ci si allontana.
Passa sopra un tooltip, entraci con il puntatore, premi Esc.
Tutto funziona con la sola tastiera.
Scollega il mouse e completa ogni operazione.
Il focus può sempre uscire da qualsiasi componente.
Entra con Tab in widget, embed e finestre di dialogo e riesci con Tab.
Le scorciatoie a tasto singolo possono essere disattivate, rimappate o funzionano solo con il focus.
Elenca le scorciatoie che usano una lettera o un numero senza tasto modificatore.
I limiti di tempo possono essere disattivati, regolati o estesi.
Trova i timeout di sessione e i passaggi a tempo.
I contenuti in movimento, lampeggianti o che si aggiornano da soli possono essere messi in pausa.
Cerca caroselli, ticker e sfondi animati.
Nulla lampeggia più di tre volte al secondo.
Controlla video e animazioni alla ricerca di effetti stroboscopici.
Un link per saltare al contenuto o i landmark permettono di oltrepassare i blocchi ripetuti.
Premi Tab una volta al caricamento e cerca Vai al contenuto.
Ogni pagina ha un titolo che la descrive.
Leggi i titoli delle schede del browser in tutto il sito.
Il focus si sposta in un ordine che preserva significato e usabilità.
Scorri con Tab e fai attenzione ai salti.
Il testo del link, insieme al suo contesto, dice dove porta.
Elenca tutti i link; segnala i semplici Clicca qui e Leggi di più.
Esiste più di un modo per trovare una pagina, come menu e ricerca o mappa del sito.
Verifica che ci siano una ricerca, una mappa del sito o un menu completo.
Titoli ed etichette descrivono il loro argomento o scopo.
Leggi da sola la struttura dei titoli: ha senso?
L'indicatore del focus da tastiera è visibile.
Scorri con Tab: devi sempre vedere dove ti trovi.
Un elemento con focus non è completamente nascosto da barre fisse o banner.
Usa Tab con un banner dei cookie e un header fisso visibili.
I gesti con percorso o multipunto hanno un'alternativa con puntatore singolo.
Controlla che le interazioni di pinch, swipe e disegno abbiano dei pulsanti.
Le azioni scattano al rilascio, oppure possono essere interrotte o annullate.
Premi, trascina fuori, rilascia: non deve attivarsi nulla.
Il nome accessibile contiene il testo dell'etichetta visibile.
Confronta le etichette visibili con i nomi calcolati negli strumenti per sviluppatori.
Le funzioni attivate scuotendo o inclinando hanno un pulsante alternativo e possono essere disattivate.
Cerca funzioni basate sul movimento del dispositivo.
Tutto ciò che si fa trascinando si può fare anche con singoli clic o tocchi.
Prova slider, elenchi ordinabili e mappe senza trascinare.
I target sono di almeno 24 per 24 pixel CSS, oppure distanziati in modo che un cerchio di 24 pixel non si sovrapponga ad altri, con alcune eccezioni.
Misura le piccole icone e i controlli in linea.
La pagina dichiara la sua lingua principale.
Controlla l'attributo lang sull'elemento html.
I passaggi in un'altra lingua sono marcati con lang.
Trova citazioni o frasi in altre lingue.
Dare il focus a un elemento non cambia il contesto.
Passa con Tab su ogni controllo: nulla deve inviare dati o navigare.
Cambiare un'impostazione non cambia il contesto senza preavviso.
Cambia select e radio: fai attenzione a navigazioni inattese.
La navigazione ripetuta mantiene lo stesso ordine relativo.
Confronta i menu su più pagine.
I componenti con la stessa funzione sono etichettati allo stesso modo.
Confronta i controlli di ricerca, carrello e download tra le pagine.
Le opzioni di aiuto ripetute compaiono nello stesso ordine relativo.
Confronta dove si trovano i link di contatto, chat o aiuto in ogni pagina.
Gli errori di inserimento sono identificati e descritti a testo.
Invia i moduli vuoti e con dati errati.
I campi hanno etichette o istruzioni dove è richiesto un inserimento.
Verifica che ogni campo abbia un'etichetta visibile e indicazioni sul formato.
Quando la correzione è nota, il messaggio di errore la suggerisce.
Leggi il testo dell'errore: spiega come correggere il dato inserito?
Gli invii importanti possono essere annullati, controllati o confermati.
Percorri il checkout e l'eliminazione dell'account.
Le informazioni già inserite in un processo vengono precompilate o sono selezionabili.
Cerca campi indirizzo o email ripetuti nello stesso flusso.
L'accesso non richiede un test di memoria o un rompicapo senza alternativa, e l'incolla è consentito.
Prova a incollare una password; verifica che esista un'opzione senza rompicapo.
I controlli personalizzati espongono nome, ruolo e stato alle tecnologie assistive.
Ispeziona i widget personalizzati nell'albero di accessibilità.
I messaggi di stato vengono annunciati senza spostare il focus.
Attiva l'aggiunta al carrello o i risultati di ricerca e ascolta.
Percepibile
Utilizzabile
Comprensibile
Robusto
Checklist interattiva WCAG 2.2 A e AA
Stampa o salva come PDF
Filtra per livello
Filtra per principio
Tutti i livelli
Livello {level}
Tutti i principi
{ticked} di {shown} criteri mostrati spuntati. Le spunte restano solo finché questa scheda è aperta.
Test:
Superato
Non superato
Selettore {label}
{label} hex
Verificatore di contrasto colori WCAG
Usa la formula della luminanza relativa dalle definizioni delle WCAG 2.2. Inserisci colori hex a sei cifre.
Testo
Sfondo
Esempio di testo normale, 16 pixel regular.
Esempio di testo grande, 24 pixel.
Rapporto di contrasto {ratio}:1
Inserisci due colori hex validi come #1f2937.
Risultato rispetto alle soglie AA
Uso
Richiede
Risultato
Testo normale (1.4.3)
Testo grande (1.4.3)
Icone, bordi, anelli di focus (1.4.11)
Testo normale, AAA (1.4.6)
Inizia gratis · Nessuna carta di credito richiesta