Test rapido di accessibilità prima del lancio del sito web: sette controlli
Sette controlli da fare con il browser prima di pubblicare il nuovo sito: titoli, testi alternativi, contrasto, tastiera, moduli e zoom al 200%.
- Nº
- 23
- Pubblicato
- Lettura
- 12 min
- Categoria
- Notes
- Scritto da
- Revylio
Test rapido di accessibilità prima del lancio: sette controlli da fare con il browser
Un test rapido di accessibilità prima del lancio è una serie di controlli manuali, eseguibili con un normale browser, che fanno emergere i problemi più evidenti del nuovo sito rispetto alle WCAG. I controlli sono sette: titoli di pagina, testi alternativi delle immagini, intestazioni, contrasto, navigazione da tastiera, etichette dei moduli e zoom.
Il test segue l'impostazione degli Easy Checks del W3C, la prima revisione di accessibilità proposta dalla Web Accessibility Initiative. Il W3C precisa che questi controlli non sono una valutazione completa. Per un giudizio definitivo e completo serve una verifica eseguita da professionisti.
Il test conserva comunque un valore pratico. Lo esegue prima della messa online, quando ogni correzione riguarda ancora i modelli di pagina e non un sito già pubblicato. Inoltre lo può svolgere il titolare, il responsabile marketing o chiunque abbia seguito il progetto, senza competenze di programmazione.
Questa guida spiega i termini essenziali, gli strumenti, ciascuno dei sette controlli e un esempio completo sulla pagina Contatti. Chiudono la guida una tabella riepilogativa e una sezione sugli obblighi per le aziende italiane.
Fonte: w3.org, forallwe.com
Le WCAG 2.1 AA come base del test e i termini da conoscere
Le WCAG (Web Content Accessibility Guidelines) sono lo standard internazionale sviluppato dal W3C per rendere i contenuti web percepibili, operabili, comprensibili e robusti. I loro punti principali si chiamano criteri di successo. Ogni controllo di questa guida corrisponde ad alcuni di questi criteri.
Il livello di riferimento per un'azienda è il livello AA. L'European Accessibility Act non cita direttamente le WCAG: fissa requisiti funzionali. Nella pratica il riferimento tecnico è la norma EN 301 549, che per i contenuti web riprende i criteri di livello AA delle WCAG 2.1. La guida pratica di ForAllWe segnala che dal 2025 si guarda anche alla versione 2.2. Chi debba rispettare l'obbligo è spiegato nella nostra guida su chi è obbligato all'accessibilità del sito dopo l'EAA.
Tre termini ricorrono in tutto il test:
- Tecnologie assistive: software o hardware che le persone con disabilità usano per interagire meglio con il web.
- Screen reader: software che legge ad alta voce il contenuto delle pagine e consente la navigazione da tastiera, usato dalle persone cieche.
- Markup: il codice della pagina web, cioè l'HTML.
Non serve leggere il markup per svolgere il test. Serve però sapere che molti problemi visibili nascono lì, e che la correzione spetta a chi ha sviluppato il sito.
Strumenti necessari: il browser e tre programmi gratuiti facoltativi
Il browser che usa ogni giorno basta per quasi tutto il test. Il W3C spiega che la maggior parte degli Easy Checks si esegue con qualsiasi browser, senza scaricare strumenti speciali. Alcuni controlli diventano però più semplici con un'estensione o un programma dedicato.
La guida di ForAllWe indica tre strumenti gratuiti utili a un primo test:
- Google Lighthouse: integrato nei DevTools di Chrome o disponibile come estensione, esegue audit automatici su accessibilità, performance e SEO basati sulle WCAG.
- NVDA: screen reader gratuito per Windows, utile per test manuali che simulano l'esperienza di un utente non vedente. Non è uno scanner automatico.
- Accessibility Insights: suite gratuita di Microsoft che individua soprattutto errori di accessibilità visiva.
Gli strumenti automatici hanno un limite preciso. Il W3C ricorda, per esempio, che un test automatico rileva se un testo alternativo manca, ma non se è adatto. Per questo il test rapido alterna sempre un controllo automatico e uno sguardo umano sulla pagina. Il risultato di Lighthouse indica dove guardare, non chiude la verifica.
Titoli di pagina e intestazioni: il primo controllo, partendo dalla scheda del browser
Il titolo di pagina è la prima informazione che uno screen reader pronuncia quando l'utente apre una nuova pagina, come spiega il W3C. Un titolo generico, ripetuto uguale su tutto il sito, lascia l'utente senza sapere dove si trova. Il controllo richiede pochi secondi per pagina.
Come controllare i titoli di pagina
Apra la home, una pagina servizio, la pagina Contatti e un articolo del blog. Legga il testo che compare nella scheda del browser. Ogni titolo deve essere diverso dagli altri e descrivere il contenuto di quella pagina specifica.
Come controllare le intestazioni
Le intestazioni sono i titoli interni che dividono la pagina in parti. Scorra la pagina e verifichi che ci sia un titolo principale e che i sottotitoli seguano l'ordine del contenuto. Un sottotitolo che sembra tale solo perché è in grassetto non funziona come intestazione per uno screen reader.
Se titoli e intestazioni risultano confusi, il problema spesso precede il design e riguarda la struttura dei contenuti. La nostra guida all'architettura del sito e dei menu prima del design mostra come impostarla.
Testo alternativo delle immagini: presente, pertinente o volutamente vuoto
Il testo alternativo è la descrizione di un'immagine che lo screen reader legge al posto dell'immagine stessa. Nel markup si scrive nell'attributo alt. Il W3C precisa che l'espressione "alt tag" è tecnicamente scorretta: il termine giusto è attributo alt, oppure testo alternativo.
Il controllo ha due livelli. Il primo è automatico: Lighthouse o un'altra estensione segnala le immagini prive di attributo alt. Il secondo è umano, perché secondo il W3C solo chi vede l'immagine nel suo contesto può giudicare se il testo alternativo è appropriato.
Per ogni immagine importante si chieda che cosa perderebbe chi non la vede. Una foto del prodotto richiede una descrizione del prodotto. Un grafico richiede il dato che il grafico mostra. Un'immagine solo decorativa, che le persone non hanno bisogno di conoscere, deve invece avere un alt vuoto, cioè alt="", secondo le indicazioni del W3C.
L'errore opposto è altrettanto frequente: decorazioni descritte con il nome del file o con parole chiave ripetute. Per regole complete su formato, peso e testo alternativo può consultare la nostra guida sulle immagini del sito e il loro testo alternativo.
Contrasto del testo: almeno 4,5:1 per il testo di dimensione normale
Il testo di dimensione normale deve avere un rapporto di contrasto di almeno 4,5:1 con lo sfondo, secondo il valore minimo predefinito riportato dal W3C. Il W3C precisa che il requisito viene chiamato spesso "contrasto di colore", ma che tecnicamente si tratta di contrasto di luminanza. Conta quindi la differenza di luminosità tra testo e sfondo, non la differenza di tinta.
Un esempio aiuta a capire quanto sia facile scendere sotto la soglia. Nella pagina dimostrativa inaccessibile "BAD Tickets" del W3C, alcune righe hanno testo grigio scuro su grigio chiaro con un rapporto di 3,76:1. A colpo d'occhio sembrano leggibili, eppure non rispettano il minimo.
Nel test rapido cerchi i casi tipici: testo grigio chiaro su bianco, testo sopra fotografie, scritte bianche su pulsanti dai colori tenui. Lighthouse segnala gli elementi con contrasto insufficiente; poi verifichi a occhio quelli che lo strumento non legge, come il testo sovrapposto alle immagini.
Il contrasto massimo non è sempre la soluzione migliore. Il W3C ricorda che alcune persone con disturbi della lettura, come la dislessia, non riescono a leggere colori molto luminosi e hanno bisogno di bassa luminanza. L'obiettivo è superare la soglia, non abbagliare.
Navigazione da tastiera e moduli: usare tutto il sito senza mouse
Un sito accessibile si usa interamente con la tastiera, perché molte persone non usano il mouse e gli screen reader navigano da tastiera. Il controllo è semplice: metta da parte il mouse e percorra ogni pagina con il tasto Tab. Con Maiusc e Tab torna indietro, con Invio attiva link e pulsanti.
Mentre si sposta, verifichi tre aspetti:
- il punto in cui si trova è sempre visibile sullo schermo;
- l'ordine dei passaggi segue l'ordine logico della pagina;
- ogni menu, finestra e pulsante si apre e si chiude da tastiera.
Il W3C descrive un problema comune: il focus della tastiera resta bloccato nei controlli di un lettore multimediale e non si riesce più a uscire. Questo blocco si chiama trappola da tastiera. Se il sito ha video incorporati, li attraversi con Tab e verifichi di poter proseguire oltre.
Le etichette dei moduli
Il modulo di contatto è il punto in cui il controllo da tastiera conta di più. Compili ogni campo solo con la tastiera e verifichi che ciascuno abbia un'etichetta visibile che dice che cosa inserire. Un testo grigio dentro il campo, che sparisce appena si inizia a scrivere, non sostituisce l'etichetta.
Zoom al 200%: il testo si ingrandisce senza scorrimento orizzontale
Il controllo dello zoom verifica che il sito resti leggibile per chi ingrandisce il testo. Il W3C indica di portare lo zoom del browser al 200%, e la guida di ForAllWe suggerisce di arrivare al 200% o più. Poi si rilegge la pagina dall'inizio alla fine.
Due problemi emergono quasi sempre. Il primo è il testo inserito dentro le immagini: il W3C ricorda che quel testo non si ingrandisce quando l'utente aumenta la dimensione del testo. Il secondo è lo scorrimento orizzontale. Secondo il W3C, la maggior parte delle persone non riesce a leggere in modo efficace un testo che richiede di scorrere in orizzontale, e alcune disabilità lo rendono impossibile.
Noi di Svennis, prima di ogni messa online, ripetiamo questo controllo su ogni modello di pagina e non solo sulla home. L'errore che troviamo più spesso a quel punto è proprio lo slogan del banner principale salvato come immagine, che allo zoom resta piccolo mentre il resto della pagina si ingrandisce.
Durante il controllo verifichi anche che menu, pulsanti e campi dei moduli non si sovrappongano e restino utilizzabili. Se un elemento sparisce o finisce fuori dallo schermo, annoti la pagina e la percentuale di zoom.
Esempio guidato: il test rapido sulla pagina Contatti con Chrome
La pagina Contatti è il miglior punto di partenza, perché riunisce testo, immagini, intestazioni e un modulo. L'esempio usa Chrome e Lighthouse, ma gli stessi passaggi valgono in qualsiasi browser. Tenga aperto un documento in cui annotare pagina, problema e posizione.
- Apra la pagina Contatti e legga il titolo nella scheda: deve nominare la pagina, non solo l'azienda.
- Apra i DevTools di Chrome, scelga Lighthouse e avvii l'analisi di accessibilità. Annoti le immagini senza attributo alt e gli elementi con contrasto insufficiente.
- Per ogni immagine segnalata, decida se è informativa o decorativa, come descritto nella sezione sul testo alternativo.
- Metta da parte il mouse e raggiunga il modulo con Tab. Compili ogni campo e invii il modulo solo da tastiera.
- Porti lo zoom al 200% e rilegga la pagina, cercando testo nelle immagini e scorrimento orizzontale.
Per tarare l'occhio sul contrasto, può confrontare la pagina con la dimostrazione "BAD Tickets" del W3C, dove il rapporto di 3,76:1 non raggiunge il minimo di 4,5:1. Alla fine avrà una lista di problemi concreti, ciascuno con la pagina e il punto esatto. È questa lista che consegna a chi sviluppa il sito.
Checklist del test rapido di accessibilità in una tabella
La tabella riassume i sette controlli, il modo di eseguirli e il segnale che indica un problema. Può stamparla e usarla su ogni modello di pagina: home, pagina servizio, articolo, pagina Contatti.
| Controllo | Come si esegue | Segnale di problema |
|---|---|---|
| Titolo di pagina | Leggere il testo nella scheda del browser | Titolo uguale su più pagine o non descrittivo |
| Testo alternativo | Lighthouse, poi giudizio sull'immagine nel contesto | Alt mancante, inutile o presente su decorazioni |
| Intestazioni | Scorrere la pagina e seguire titolo e sottotitoli | Sottotitoli solo in grassetto o fuori ordine |
| Contrasto | Lighthouse e verifica del testo su immagini | Testo normale sotto 4,5:1 |
| Tastiera | Tab, Maiusc e Tab, Invio senza mouse | Focus invisibile o trappola nei lettori video |
| Etichette dei moduli | Compilare il modulo da tastiera | Campi senza etichetta visibile |
| Zoom | Zoom del browser al 200% | Testo nelle immagini o scorrimento orizzontale |
Ogni riga con un segnale di problema diventa una voce della lista da correggere prima del lancio. Una tabella senza problemi non certifica la conformità: indica solo che il sito ha superato la prima revisione.
Cosa significa per un'azienda italiana: dall'accessibilità dichiarata a quella dimostrata
Per un'azienda italiana il test rapido diventa un primo elemento di prova, perché le regole chiedono sempre più di dimostrare l'accessibilità. La normativa chiave è la Direttiva UE 2019/882, l'European Accessibility Act, in vigore dal 2019 e applicabile dal 28 giugno 2025. In Italia la recepisce il decreto legislativo 82/2022.
Il 24 marzo 2026 la Gazzetta Ufficiale ha pubblicato la determinazione dell'Agenzia per l'Italia Digitale sulle nuove Linee guida sull'accessibilità dei servizi, come riporta In Terris. Secondo l'articolo, non basta più affermare che un servizio è accessibile: bisogna provarlo. Le Linee guida introducono criteri verificabili, checklist tecniche e riferimenti agli standard EN 301 549 e WCAG.
L'obbligo, previsto dal decreto legislativo 82/2022, esce dal perimetro della sola Pubblica Amministrazione. Riguarda servizi ai consumatori come banca, e-commerce, trasporti e comunicazioni elettroniche, con l'esclusione delle microimprese che forniscono servizi. Chi fornisce servizi rientranti nell'obbligo deve inoltre informare il pubblico su come il servizio soddisfa i requisiti di accessibilità. Il contenuto di queste informazioni è indicato nell'allegato IV del decreto legislativo 82/2022. Le sanzioni variano da paese a paese.
Un aspetto riguarda anche la privacy. Il Garante per la protezione dei dati personali si è espresso sulle Linee guida AgID con un parere del 29 gennaio 2026. Nel parere ha chiesto che i fornitori evitino di tracciare gli strumenti e le impostazioni che le persone con disabilità usano per accedere ai servizi digitali. Per sapere se la Sua azienda rientra nell'obbligo, legga la nostra guida su accessibilità del sito aziendale dopo l'EAA.
Prossimi passi dopo il test rapido di accessibilità
Il primo passo è trasformare gli appunti del test in una lista di correzioni, con pagina, problema e posizione. Consegni la lista a chi sviluppa il sito e fissi una data per ripetere il test sui punti corretti, prima della messa online.
Il secondo passo riguarda chi pubblica contenuti dopo il lancio. Un sito che supera il test oggi può fallirlo domani per un banner caricato come immagine o una foto senza testo alternativo. Stabilisca chi controlla questi aspetti, seguendo la nostra guida su ruoli, permessi e approvazione dei contenuti dopo il lancio.
Il terzo passo è la verifica professionale. Il W3C ricorda che i suoi Easy Checks non bastano per una valutazione definitiva. Se sta ancora scegliendo un fornitore, chieda come esegue e documenta i controlli: la nostra guida su come scegliere l'agenzia per il sito aziendale elenca le domande da porre prima di firmare.
Se il test rivela problemi diffusi su tutti i modelli di pagina, conviene valutare un intervento più ampio. La pagina sul rifacimento e restyling del sito web descrive come Revylio integra l'accessibilità nel progetto fin dall'inizio.