Come leggere le WCAG 2.2 per il tuo sito, le correzioni che coprono la maggior parte dei problemi reali, un test manuale di 30 minuti che chiunque può fare, e come si sovrappongono accessibilità e usabilità.
Domande frequenti
Cosa significa che un sito è conforme a WCAG?
Significa che il sito soddisfa i criteri di successo delle Web Content Accessibility Guidelines a un livello scelto, di solito WCAG 2.1 o 2.2 livello AA. Il livello AA include ogni criterio di livello A e AA. La maggior parte delle leggi e delle policy di procurement che citano le WCAG chiedono il livello AA.
Come dovrei interpretare le linee guida WCAG per il mio sito?
Inizia con il riferimento rapido "How to Meet WCAG" del W3C, filtra per livello A e AA, e per ogni criterio leggi la pagina "Understanding" collegata, che spiega l'intento in linguaggio semplice. Poi testa i tuoi template chiave (home, una pagina di contenuto, un modulo, il checkout) invece di ogni pagina singolarmente.
Un overlay o plugin di accessibilità può rendere conforme il mio sito?
Nessuno strumento può rendere conforme un sito da solo. Gli overlay che aggiungono una toolbar non correggono il codice sottostante, e molti utenti disabili e specialisti di accessibilità riportano che sono d'intralcio. Correggi direttamente HTML, contrasto, etichette e supporto da tastiera.
Qual è la differenza tra usabilità e accessibilità?
Accessibilità significa che le persone con disabilità possono percepire, capire, navigare e interagire con il sito. Usabilità significa che il sito è facile ed efficiente per tutti. Si sovrappongono molto: etichette chiare, buon contrasto e navigazione prevedibile aiutano tutti i visitatori, non solo quelli con disabilità.
I controlli automatici trovano tutti i problemi di accessibilità?
No. Strumenti come WAVE, axe e Lighthouse individuano problemi come testo alternativo mancante, contrasto basso ed etichette mancanti, ma molti criteri, come se il testo alternativo sia significativo o se l'ordine di focus abbia senso, richiedono una verifica umana.
Un sito conforme a WCAG soddisfa le Web Content Accessibility Guidelines a un livello scelto, e per quasi ogni azienda significa WCAG 2.2 livello AA. In pratica, la maggior parte dei siti fallisce sugli stessi pochi problemi: basso contrasto colore, testo alternativo mancante sulle immagini, campi modulo senza etichetta, link e pulsanti vuoti, e cose che non puoi raggiungere con la tastiera. Correggi quelli e testa con una tastiera e uno screen reader, e avrai coperto una grande quota di ciò in cui si imbattono gli utenti reali.
Questa guida spiega come leggere le WCAG senza perdersi, le correzioni che contano di più, e un test di 30 minuti che puoi fare da solo.
Come sono strutturate le WCAG
Le WCAG sono pubblicate dal W3C. Sono organizzate a livelli:
Quattro principi, noti come POUR: il contenuto deve essere Percepibile (Perceivable), Operabile (Operable), Comprensibile (Understandable) e Robusto (Robust).
Linee guida sotto ogni principio (per esempio, "Alternative testuali" o "Accessibile da tastiera").
Criteri di successo sotto ogni linea guida. Sono le regole testabili, ciascuna numerata (come 1.4.3 Contrasto) e assegnata a un livello: A, AA o AAA.
Il livello A è il minimo. Il livello AA è l'obiettivo comune per i requisiti legali e di procurement. Il livello AAA è più rigido e di solito non richiesto per interi siti.
WCAG 2.2 è diventata una Raccomandazione W3C a ottobre 2023. Ha aggiunto criteri come dimensione minima del target, focus non oscurato, e autenticazione accessibile, e ha rimosso il 4.1.1 Parsing come obsoleto.
Come interpretare le WCAG per il tuo sito
Lo standard si legge come uno standard, perché lo è. Un modo pratico per affrontarlo:
Apri il "How to Meet WCAG (Quick Reference)" del W3C.
Filtralo solo per livello A e AA.
Per ogni criterio, leggi la pagina "Understanding" collegata. Spiega l'intento in linguaggio semplice, con esempi di superamento e fallimento.
Invece di testare ogni pagina, testa i tuoi template: homepage, una pagina di contenuto standard, un articolo di blog, un modulo, una pagina prodotto o checkout. Correggere un template corregge ogni pagina costruita su di esso.
Registra ogni problema con il numero del criterio, la pagina, e come appare una correzione.
Le correzioni che coprono la maggior parte dei fallimenti reali
1. Contrasto colore (1.4.3 e 1.4.11)
Testo normale: almeno 4.5:1 rispetto allo sfondo.
Testo grande (circa 24px normale, o 18.66px grassetto e più grande): almeno 3:1.
Componenti dell'interfaccia e grafica significativa (bordi dei pulsanti, contorni degli input, icone che trasmettono informazioni): almeno 3:1.
Il testo placeholder grigio chiaro e il testo bianco su colori di marchio pallidi sono i colpevoli abituali. Controlla con il contrast checker di WebAIM o gli strumenti sviluppatore del tuo browser.
2. Alternative testuali per le immagini (1.1.1)
Le immagini informative ottengono un testo alternativo che descrive ciò che conta: alt="Tecnico che sostituisce un filtro della caldaia".
Le immagini decorative ottengono alt vuoto: alt="", così gli screen reader le saltano.
Le immagini di testo (uno screenshot di volantino, un menu come JPG) hanno bisogno dello stesso testo disponibile come testo reale.
Le immagini con link, come un logo che porta alla home, descrivono la destinazione: alt="Home Acme Plumbing".
3. Etichette e errori dei moduli (1.3.1, 3.3.1, 3.3.2)
Ogni input ha bisogno di un <label> visibile collegato ad esso. Il testo placeholder non è un'etichetta: scompare quando digiti.
I messaggi di errore dicono cosa è andato storto e come correggerlo ("Inserisci un numero di telefono con prefisso"), in testo, non solo un bordo rosso.
I campi obbligatori sono segnati in testo o con un indicatore accessibile, non solo dal colore.
4. Accesso da tastiera (2.1.1, 2.4.3, 2.4.7)
Ogni link, pulsante, menu e controllo modulo deve funzionare con Tab, Shift+Tab, Invio e Spazio.
L'ordine di focus segue l'ordine visivo.
Un indicatore di focus visibile mostra dove ti trovi. Rimuovere il contorno del browser con outline: none senza sostituzione è un fallimento comune.
Menu a tendina e modali devono aprirsi, funzionare e chiudersi da tastiera, e i modali dovrebbero mantenere il focus dentro finché non vengono chiusi.
5. Link e pulsanti con nomi (2.4.4, 4.1.2)
I pulsanti solo icona (un menu hamburger, una lente di ricerca, icone social) hanno bisogno di un nome accessibile, tramite testo visibile, aria-label o testo nascosto.
Evita una pagina piena di link "Clicca qui" e "Leggi di più". Fai in modo che il testo del link descriva la destinazione, o dai a ciascuno un nome accessibile distinto.
6. Struttura e intestazioni (1.3.1, 2.4.6)
Un <h1> per pagina che descrive la pagina.
Intestazioni in ordine logico (h2 per le sezioni, h3 al loro interno), non scelte per la dimensione del font.
Usa vere liste, tabelle con celle di intestazione, e landmark (<header>, <nav>, <main>, <footer>).
Imposta la lingua della pagina: <html lang="it">.
7. Novità in WCAG 2.2, da conoscere
2.5.8 Target Size (Minimum), AA: target cliccabili di almeno 24 per 24 pixel CSS, o abbastanza spaziatura intorno a quelli più piccoli.
2.4.11 Focus Not Obscured (Minimum), AA: intestazioni fisse, banner cookie e widget di chat non devono nascondere completamente l'elemento con focus.
3.3.8 Accessible Authentication (Minimum), AA: non richiedere di risolvere enigmi o ricordare informazioni per accedere senza un'alternativa; consenti gestori di password e incolla.
3.3.7 Redundant Entry, A: non far ridigitare alle persone informazioni che hanno già dato nello stesso processo.
8. Media e movimento
I video hanno bisogno di sottotitoli (1.2.2); il video preregistrato ha bisogno di audiodescrizione o un'alternativa testuale per il contenuto visivo importante.
Qualsiasi cosa che si muove automaticamente per più di cinque secondi ha bisogno di un modo per metterla in pausa (2.2.2).
Rispetta l'impostazione prefers-reduced-motion per le animazioni grandi.
Un test manuale di 30 minuti
Gli strumenti automatici catturano solo parte del quadro. Aggiungi questa routine per ogni template chiave.
Minuti 0-5: scansione automatica. Esegui WAVE (estensione browser) o axe DevTools, o la sezione accessibilità di Lighthouse. Correggi errori evidenti come alt mancante, etichette mancanti e fallimenti di contrasto.
Minuti 5-15: solo tastiera. Metti via il mouse. Naviga con Tab la pagina dall'inizio.
Riesci a vedere dove si trova il focus in ogni momento?
Riesci ad aprire e chiudere il menu, usare ogni campo modulo e inviare?
C'è un link "Vai al contenuto", e funziona?
Il focus scompare mai dietro un'intestazione fissa o un banner?
Minuti 15-25: screen reader. Usa VoiceOver (integrato in macOS e iOS) o NVDA (gratuito su Windows).
Ascolta l'elenco delle intestazioni. Descrive la pagina?
Naviga con Tab su immagini e pulsanti. Hanno senso fuori contesto?
Compila il modulo. Ogni campo viene annunciato con la sua etichetta? Gli errori vengono annunciati?
Minuti 25-30: zoom e reflow. Ingrandisci il browser al 200% e poi al 400%. Al 400%, il contenuto dovrebbe riorganizzarsi in una colonna senza scorrimento orizzontale (1.4.10 Reflow), e niente dovrebbe essere tagliato.
La sovrapposizione tra usabilità e accessibilità
Le persone che cercano "usabilità accessibilità web" hanno ragione a raggrupparle. Quasi ogni correzione di accessibilità è una correzione di usabilità:
Correzione di accessibilità
Chi altro aiuta
Contrasto forte
Chiunque sia al sole con il telefono
Etichette visibili
Chiunque compili un modulo di fretta
Sottotitoli
Chi guarda con l'audio spento
Supporto da tastiera
Power user, persone con un trackpad rotto
Target di tocco più grandi
Tutti su mobile
Messaggi di errore chiari
Chiunque faccia un refuso
Overlay, dichiarazioni e la legge
Overlay: i widget che promettono conformità in una riga non cambiano il tuo codice sottostante. Correggi il sito stesso.
Dichiarazione di accessibilità: pubblica una breve pagina che dice quale standard persegui, i problemi noti, e come contattarti per aiuto o formati alternativi.
Contesto legale: i requisiti variano per paese. L'European Accessibility Act si applica a molti prodotti e servizi nell'UE da giugno 2025; negli USA, l'ADA viene applicato frequentemente ai siti web; gli enti del settore pubblico spesso hanno regole specifiche. Chiedi una consulenza legale per la tua situazione.
Checklist
[ ] Contrasto: 4.5:1 testo, 3:1 testo grande e parti UI
[ ] Testo alternativo sulle immagini informative, alt vuoto su quelle decorative
[ ] Ogni input ha un'etichetta visibile e collegata
[ ] L'intero sito funziona da tastiera con focus visibile
[ ] I pulsanti icona hanno nomi accessibili
[ ] Intestazioni e landmark logici, lingua della pagina impostata
[ ] Target di tocco di almeno 24 per 24 pixel CSS
[ ] Sottotitoli sui video, controllo pausa sul movimento
[ ] Reflow al 400% di zoom
[ ] Dichiarazione di accessibilità pubblicata
L'accessibilità supporta anche la ricerca: intestazioni, testo alternativo e link descrittivi sono anche basi SEO on-page, coperte nella nostra checklist SEO on-page.
We.Inc genera siti come codice HTML, CSS e React standard che puoi modificare direttamente, così puoi correggere etichette, testo alternativo e contrasto da solo o chiedere le modifiche in chat. Esegui sempre i controlli manuali sopra su qualsiasi cosa pubblichi.