Come testare un sito con Lighthouse, WAVE e Axe DevTools

Testare l’accessibilità di un sito significa verificare se contenuti, interfacce, form, menu, immagini e componenti interattivi possono essere usati anche da persone con disabilità o da utenti che utilizzano tecnologie assistive.

Gli strumenti automatici sono molto utili per iniziare, ma non riescono a individuare tutti i problemi. Per questo è importante affiancare ai test automatici anche controlli manuali.

Perché usare strumenti automatici

Strumenti come Lighthouse, WAVE e Axe DevTools aiutano a trovare rapidamente problemi frequenti.

• contrasto colori insufficiente;
• immagini senza testo alternativo;
• form senza label;
• errori ARIA;
• heading disordinati;
• bottoni o link senza nome accessibile;
• problemi tecnici rilevabili nel codice.

Come usare Lighthouse

Lighthouse è integrato in Chrome DevTools e consente di eseguire controlli su performance, SEO, best practice e accessibilità.

Passaggi base

• Apri il sito con Google Chrome.
• Clicca con il tasto destro e scegli “Ispeziona”.
• Vai nella scheda “Lighthouse”.
• Seleziona la categoria “Accessibility”.
• Avvia il test e leggi gli errori rilevati.

Lighthouse è utile per una prima fotografia tecnica, ma non basta per valutare tutto il percorso utente.

Come usare WAVE

WAVE è uno strumento molto utile perché mostra visivamente gli errori direttamente sulla pagina. Questo aiuta a capire dove si trovano problemi come alt mancanti, errori di contrasto, label assenti o struttura heading poco chiara.

• Analizza visivamente la pagina.
• Mostra icone di errore, avviso e struttura.
• Aiuta a individuare problemi di contrasto.
• Permette di verificare heading, landmark e form.

È particolarmente utile per chi vuole capire rapidamente quali parti della pagina richiedono attenzione.

Come usare Axe DevTools

Axe DevTools è uno strumento molto usato dagli sviluppatori per individuare errori di accessibilità direttamente nel browser.

• Si installa come estensione browser.
• Analizza la pagina corrente.
• Segnala problemi tecnici e suggerisce correzioni.
• È utile per sviluppatori, agenzie e team tecnici.

Axe è particolarmente efficace per individuare problemi strutturali legati a HTML, ARIA, form e componenti interattivi.

Cosa controllare sempre manualmente

Dopo i test automatici è fondamentale usare il sito come farebbe un utente reale.

• Premi TAB e verifica se tutti gli elementi importanti sono raggiungibili.
• Controlla che il focus sia sempre visibile.
• Usa ENTER per attivare pulsanti e link.
• Usa ESC per chiudere menu, popup o modali.
• Verifica che i form siano comprensibili anche in caso di errore.
• Controlla menu mobile, checkout, prenotazioni o aree riservate.

Quali pagine testare

Non basta testare solo la homepage. Le criticità spesso si trovano nelle pagine funzionali.

• Homepage.
• Pagina contatti.
• Form richiesta informazioni.
• Pagina prodotto o servizio.
• Carrello e checkout.
• Area login o area riservata.
• Pagine con popup o filtri.
• Pagine con PDF o documenti scaricabili.

Errori da non sottovalutare

Alcuni errori possono sembrare piccoli ma creano grandi difficoltà agli utenti.

• Focus invisibile.
• Popup non chiudibile da tastiera.
• Campi obbligatori non chiari.
• Contrasto basso su CTA o prezzi.
• Messaggi di errore non associati ai campi.
• Bottoni solo con icona e senza label.
• Menu mobile non raggiungibile via tastiera.

Test automatico e audit completo: differenza

Un test automatico segnala problemi tecnici rilevabili dal codice. Un audit completo valuta anche esperienza reale, percorsi utente, comportamento dei componenti e compatibilità con tecnologie assistive.

Per questo motivo è corretto usare gli strumenti automatici come punto di partenza, non come garanzia assoluta.

Conclusione

Lighthouse, WAVE e Axe DevTools sono ottimi strumenti per iniziare a migliorare l’accessibilità di un sito. La parte più importante, però, resta la verifica manuale dei percorsi principali e la correzione progressiva delle barriere digitali.