Mappa tematica WCAG 2.2
Introduzione
In questa pagina è disponibile la traduzione italiana della WCAG Map , una risorsa preziosa creata da Andrew Hick per semplificare la comprensione delle linee guida WCAG 2.2 (Web Content Accessibility Guidelines).
Ringraziamo l’autore per averci autorizzato a realizzare una traduzione della mappa, che è rilasciata sotto licenza Creative Commons: CC BY-NC 4.0
Questo diagramma raggruppa tutti i criteri di successo delle Web Content Accessibility Guidelines (WCAG) per tema, nella versione 2.2, livelli A e AA. Esiste anche una versione della mappa per il livello AAA.
La mappa illustra i collegamenti pratici tra i vari criteri, che potrebbero non essere evidenti dai nomi delle linee guida. Ad esempio, tutti i criteri che possono essere testati tramite tastiera sono disposti su una stessa linea. La struttura si basa principalmente sull’albero decisionale WCAG , che fornisce maggiori dettagli su come testare ogni criterio.
Altre versioni:
Mappa
Descrizione
La mappa assomiglia a quella di una metropolitana, mostrando 55 criteri di successo come stazioni distribuite su 7 linee.
Ogni stazione indica se un criterio è di livello A o AA. I 4 principi delle WCAG sono rappresentati come zone che si espandono dal centro verso l’esterno, evidenziate da sottili linee grigie:
- 1.x.x – Percepibile (più vicino al centro)
- 2.x.x – Utilizzabile
- 3.x.x – Comprensibile
- 4.x.x – Robusto (più lontano dal centro)
Ogni linea viene descritta in dettaglio nelle sezioni successive. Alcuni nomi dei criteri sono leggermente semplificati nel contesto del livello AA.
Tastiera
Questi criteri garantiscono che tutte le funzionalità siano disponibili con la tastiera, e che i componenti dell’interfaccia abbiano il focus visibile.
La linea è di colore blu solido e va da ovest a nord.
| Numero | Criterio di successo | Livello | Interscambio |
|---|---|---|---|
| 1.4.13 | Contenuto con hover o focus | AA | |
| 2.1.1 | Tastiera | A | none |
| 2.1.2 | Nessun impedimento all’uso della tastiera | A | none |
| 2.1.4 | Tasti di scelta rapida | A | none |
| 2.4.1 | Salto di blocco | A | none |
| 2.4.3 | Ordine del focus | A | none |
| 2.4.7 | Focus visibile | AA | Sensoriale |
| 2.4.11 | Focus non nascosto (minimo) nuovo | AA | none |
| 3.2.1 | Al focus | A | none |
| 3.2.2 | All’input | A | |
| 4.1.2 | Nome, ruolo, valore | A |
Zoom e leggibilità
Questi criteri assicurano che il testo sia:
- leggibile quando viene ingrandito o distanziato;
- interpretato come testo (piuttosto che solo come immagine);
- controllabile quando appare in stato di hover o di focus.
La linea è di colore rosso scuro con due linee interne bianche. Si estende verso ovest, a partire dal lato ovest del centro.
| Numero | Criterio di successo | Livello | Interscambi |
|---|---|---|---|
| 1.4.3 | Contrasto (minimo) | AA | Sensoriale |
| 1.4.5 | Immagini di testo | AA | Sensoriale |
| 1.4.4 | Ridimensionamento del testo | AA | none |
| 1.4.10 | Ricalcolo del flusso | AA | Gesture |
| 1.4.12 | Spaziatura del testo | AA | none |
| 1.4.13 | Contenuto con Hover o Focus | AA |
Sensoriale
Questi criteri prevengono che la fruizione del contenuto sia dipendente soltanto da alcuni sensi, garantendo che:
- gli elementi abbiano abbastanza contrasto;
- la percezione non dipenda solo dalla vista, dal colore, dall’udito o dal timing;
- siano evitate distrazioni uditive o visive.
La linea è di colore giallo con un bordo nero. Si estende principalmente da nord ovest a est, riavvolgendosi su sé stessa dalle Caratteristiche Sensoriali in poi.
| Numero | Criterio di successo | Livello | Interscambi |
|---|---|---|---|
| 2.4.7 | Focus visible | AA | Tastiera |
| 1.4.11 | Contrasto in contenuti non testuali | AA | none |
| 1.4.3 | Contrasto (minimo) | AA | Zoom e leggibilità |
| 1.4.1 | Uso del colore | A | none |
| 1.4.5 | Immagini di testo | AA | Zoom e leggibilità |
| 1.1.1 | Contenuti non testuali | A | Codice ed etichette |
| 1.3.3 | Caratteristiche sensoriali | A | Moduli |
| 1.2.1 | Solo audio e solo video (preregistrati) | A | none |
| 1.2.2 | Sottotitoli (preregistrati) | A | none |
| 1.2.4 | Sottotitoli (in tempo reale) | AA | none |
| 1.2.5 | Audiodescrizione (preregistrata) | AA | none |
| 1.2.3 | Audiodescrizione o tipo di media alternativo (preregistrato) | A | none |
| 1.4.2 | Controllo del sonoro | A | none |
| 2.2.1 | Regolazione tempi di esecuzione | A | Moduli |
| 2.2.2 | Pausa, stop, nascondi | A | none |
| 2.3.1 | Tre lampeggiamenti o inferiore alla soglia | A | none |
Codice ed etichette
Questi criteri rendono il contenuto compatibile con le tecnologie assistive, essendo:
- sviluppato in maniera coerente con il modo in cui appare visivamente;
- etichettato in maniera appropriata.
I Moduli hanno un set aggiuntivo di criteri.
La linea è di colore nero con un bordo bianco. Si estende principalmente da sud a nord.
| Numero | Criterio di successo | Livello | Interscambi |
|---|---|---|---|
| 3.1.2 | Parti in lingua | AA | none |
| 3.1.1 | Lingua della pagina | A | none |
| 2.4.2 | Titolazione della pagina | A | Intero sito |
| 1.1.1 | Contenuti non testuali | A | Sensoriale |
| 1.3.1 | Informazioni e correlazioni | A | none |
| 1.3.2 | Sequenza significativa | A | none |
| 2.4.4 | Scopo del collegamento (nel contesto) | A | none |
| 2.4.6 | Intestazioni ed etichette | AA | none |
| 2.5.3 | Etichetta nel nome | A | Moduli |
| 3.3.2 | Etichette o istruzioni | A | Moduli |
| 3.2.2 | All’input | A | |
| 4.1.2 | Nome, ruolo, valore | A | |
| 4.1.3 | Messaggi di stato | AA | Moduli |
Moduli
Questi criteri aiutano ad assicurare che i moduli:
- non siano dipendenti dalle caratteristiche sensoriali delle istruzioni o da tempistiche di compilazione;
- abbiano istruzioni e messaggi di errore appropriati;
- siano interagibili con le tecnologie assistive;
- siano facili da raggiungere e completare.
La linea è di colore verde con un singola linea bianca all’interno. Si estende principalmente dalla parte est del centro fino a nord. Si riavvolge su sé stessa da “Identificare lo scopo degli input” in poi.
| Numero | Criterio di successo | Livello | Interscambi |
|---|---|---|---|
| 2.2.1 | Regolazione tempi di esecuzione | A | Sensoriale |
| 1.3.3 | Caratteristiche sensoriali | A | Sensoriale |
| 1.3.5 | Identificare lo scopo degli input | AA | none |
| 2.5.3 | Etichetta nel nome | A | Codice ed etichette |
| 3.3.2 | Etichette o istruzioni | A | Codice ed etichette |
| 3.2.2 | All’input | A | |
| 4.1.2 | Nome, ruolo, valore | A | |
| 4.1.3 | Messaggi di stato | AA | Codice ed etichette |
| 3.3.1 | Identificazione di errori | A | none |
| 3.3.3 | Suggerimenti per gli errori | AA | none |
| 3.3.4 | Prevenzione degli errori (legali, finanziari, dati) | AA | none |
| 3.3.7 | Inserimento ridondante nuovo | A | none |
| 3.3.8 | Autenticazione accessibile (minimo) nuovo | AA | none |
Gesture
Questi criteri assicurano che la funzionalità:
- non sia dipendente da gesture, trascinamenti o movimenti;
- funzioni su schermi piccoli, sia in modalità verticale che orizzontale;
- riduca il rischio di attivare azioni non volute.
La linea è di colore ciano con un bordo nero e una linea interna nera. Si estende in loop da sud a ovest.
| Numero | Criterio di successo | Livello | Interscambi |
|---|---|---|---|
| 1.4.13 | Contenuto con Hover o Focus | AA | |
| 1.3.4 | Orientamento | AA | none |
| 1.4.10 | Ricalcolo del flusso | AA | Zoom e leggibilità |
| 2.5.1 | Movimenti del puntatore | A | none |
| 2.5.2 | Cancellazione delle azioni del puntatore | A | none |
| 2.5.4 | Azionamento da movimento | A | none |
| 2.5.7 | Movimenti di trascinamento nuovo | AA | none |
| 2.5.8 | Dimensione dell’obiettivo (minimo) nuovo | AA | none |
Intero sito
Questi criteri devono essere testati su tutto il sito, per garantire che:
- nomi, menu e meccanismi di supporto appaiano in modo coerente;
- le pagine abbiano titoli significativi;
- sia prevista più di una modalità per accedere a ciascuna pagina.
La linea è di colore rosa con due linee nere interne. Si estende da sud a sud-est.
| Numero | Criterio di successo | Livello | Interscambi |
|---|---|---|---|
| 2.4.2 | Titolazione della pagina | A | Codice ed etichette |
| 2.4.5 | Differenti modalità | AA | none |
| 3.2.3 | Navigazione coerente | AA | none |
| 3.2.4 | Identificazione coerente | AA | none |
| 3.2.6 | Aiuto coerente nuovo | A | none |
Alternative
Questi progetti alternativi utilizzano gli stessi raggruppamenti:
- WCAG 2.2 explorer a cura di Vicky Teinaki, progetto interattivo con gli stessi raggruppamenti;
- Figma: WCAG 2.2 Card Deck a cura di Johannes Lehner, che aggiunge una breve spiegazione di ogni criterio usando “WCAG, but in a language I understand ” di Martin Underhill.
Ringraziamenti
La mappa è stata originariamente ispirata dal progetto “Intopia’s fantastic WCAG 2.2 map ” con il desiderio di approcciare i criteri da una prospettiva leggermente differente.