Strumento gratuito: Accessibilità

Verifica accessibilità sito web

Inserisci il tuo indirizzo e testiamo quella pagina e fino a quattro pagine chiave in un browser reale secondo le regole delle WCAG 2.2 di livello A e AA. Per ogni barriera ottieni l’elemento, la pagina, uno screenshot e una spiegazione di chi ne è colpito.

Gratis. Testa fino a cinque pagine chiave in circa un minuto.

Cosa controlla questo strumento

  • Cinque pagine che rappresentano il tuo sito

    La pagina che inserisci e fino a quattro pagine scelte tra i suoi link in base al tipo di sito. In un negozio online sono una collezione, un prodotto, il carrello e una pagina di contenuto; negli altri siti, pagine come prezzi, contatti, un articolo o i servizi. I template si ripetono, quindi una sola pagina prodotto di solito mostra i problemi di tutte le altre.

  • Regole WCAG sulla pagina renderizzata

    Ogni pagina viene caricata in Chromium a 1366 × 900 e axe-core, il motore di regole open source di Deque, esegue le sue regole WCAG 2.0, 2.1 e 2.2 di livello A e AA dopo l’esecuzione degli script della pagina. Così rileva anche i problemi che un tema o un’app crea solo quando la pagina viene costruita nel browser.

  • Impatto e criteri di successo

    Ogni regola non superata mostra il suo impatto (critico, grave, moderato o lieve), i criteri di successo WCAG a cui corrisponde e quanti elementi e pagine coinvolge.

  • L’elemento con l’errore, evidenziato

    L’HTML di un elemento di esempio e uno screenshot della pagina con quell’elemento contornato, così tu o il tuo sviluppatore potete trovarlo nel template senza andare a tentativi.

  • Elementi su cui deve decidere una persona

    Quando axe-core trova qualcosa che non riesce a stabilire, come un testo sopra un’immagine di sfondo di cui non può misurare il contrasto, l’elemento viene elencato come da verificare (needs review). Non viene mai conteggiato come errore.

  • Un test da tastiera

    Sulla prima pagina premiamo Tab 40 volte e registriamo dove va il focus: se si sposta, se resta bloccato in un ciclo (spesso dentro un banner dei cookie), se la prima tappa è uno skip link e quali elementi con il focus non mostrano alcun indicatore di focus visibile. Quest’ultimo controllo è euristico, quindi viene mostrato come da verificare.

Cosa non può controllare

  • Sentire cosa annuncia uno screen reader. Un software può confermare che un pulsante ha un nome, non che quel nome abbia senso quando viene letto ad alta voce.
  • Valutare sottotitoli, trascrizioni o audiodescrizioni di video e audio.
  • Valutare i criteri cognitivi e di contenuto, ad esempio se le istruzioni sono chiare o se i messaggi di errore aiutano le persone a correggere l’errore.
  • Testare pagine protette da login, password o protezione anti-bot, né completare un checkout.
  • Dirti se il tuo sito è conforme alle WCAG o rispetta una qualsiasi legge. Le regole automatiche trovano una parte dei problemi; per il resto servono le persone.

Perché è importante

Le barriere di accessibilità sono spesso piccoli errori nei template con grandi effetti. Un pulsante del carrello fatto solo di un’icona e senza nome accessibile viene annunciato semplicemente come «pulsante», quindi chi usa uno screen reader non capisce a cosa serve. Un testo grigio su bianco che non raggiunge il rapporto di contrasto di 4,5:1 è difficile da leggere per molte persone ipovedenti, e per chiunque usi lo smartphone sotto il sole.

Poiché la stessa intestazione, la stessa scheda prodotto e lo stesso footer compaiono in ogni pagina, una sola correzione in un template può eliminare centinaia di errori in un colpo. Per questo i risultati sono raggruppati per regola, con il numero di elementi e di pagine, invece di elencare ogni occorrenza come un problema a sé.

In molti paesi l’accessibilità ha anche un aspetto legale. Una scansione non può dirti se una legge si applica a te o se la rispetti. Ti dà invece un elenco datato di barriere reali sulle tue pagine, che in ogni caso è il punto di partenza concreto.

Come leggere i risultati

Critico
La barriera può impedire del tutto ad alcune persone di usare l’elemento, ad esempio un campo di un modulo senza etichetta o un pulsante senza nome. Correggi prima questi.
Grave
La barriera rende un’attività molto più difficile per alcune persone, come un testo del corpo che non raggiunge il rapporto di contrasto.
Moderato
La barriera causa difficoltà o confusione, ma di solito le persone riescono ad aggirarla.
Lieve
Un piccolo problema o un fastidio. Vale comunque la pena correggerlo la prossima volta che modifichi quel template.
Criteri di successo WCAG
I numeri accanto a una regola, come 1.1.1 o 1.4.3, sono i criteri che verifica. Una regola senza criterio indicato è una buona pratica (best practice) e non un requisito WCAG.
Elementi e pagine
Quanti elementi non hanno superato la regola e su quante delle pagine testate. Una regola che fallisce su ogni pagina di solito si trova in una parte condivisa come l’intestazione, il menu o il footer.
Da verificare
axe-core ha trovato qualcosa che non è riuscito a decidere. Controlla tu l’elemento: potrebbe superare il controllo oppure no. Questi elementi non vengono conteggiati come errori.
Trappola del focus
Il tasto Tab continuava a far girare il focus tra gli stessi pochi elementi. Se appartengono a un banner dei cookie, chi usa la tastiera potrebbe non riuscire a raggiungere il resto della pagina.
Il focus non si sposta (Focus doesn’t move)
Premendo Tab il focus non è mai arrivato su nessun elemento. Link e pulsanti potrebbero essere costruiti con elementi div o span, oppure uno script potrebbe intercettare il tasto.
Skip link
Se la prima tappa di Tab è un link «Vai al contenuto». Senza di esso, chi usa la tastiera deve attraversare con Tab tutta l’intestazione in ogni pagina. Anche i landmark e i titoli possono soddisfare WCAG 2.4.1 Bypass Blocks.
Nessun indicatore di focus visibile
Elementi con il focus su cui non abbiamo visto contorno (outline), ombra (box shadow) o sottolineatura. Uno stile diverso, come un cambio di colore, può comunque essere visibile, quindi scorri tu questi elementi con Tab per averne conferma.

Come correggere i problemi più comuni

  • Testo che non raggiunge il rapporto di contrasto

    Il testo normale deve avere almeno 4,5:1 rispetto allo sfondo, il testo grande (circa 24 px, o circa 18,7 px in grassetto) 3:1. Cambia il colore nelle impostazioni del tema o nei design token invece che elemento per elemento, poi ricontrolla il testo segnaposto, gli stati hover e il testo sopra le immagini.

  • Immagini senza testo alternativo

    Dai a ogni immagine significativa un attributo alt che dica cosa mostra o cosa fa, ad esempio il nome del prodotto e il colore. Le immagini decorative ricevono un alt vuoto (alt="") così gli screen reader le saltano. In Shopify aggiungi il testo alternativo dall’immagine nella sezione Contenuti multimediali del prodotto; in WordPress, nel campo Testo alternativo della Libreria media.

  • Campi dei moduli senza etichetta

    Collega un’etichetta a ogni campo con <label for> corrispondente all’id del campo, oppure usa aria-label quando non c’è testo visibile. Non affidarti al testo segnaposto come unica etichetta: scompare appena qualcuno inizia a scrivere. Le iscrizioni alla newsletter e i campi di ricerca nell’intestazione sono i colpevoli più frequenti.

  • Pulsanti e link senza nome accessibile

    I controlli a icona per carrello, ricerca, menu o profili social spesso contengono solo un SVG. Aggiungi un testo visibile o un aria-label che dica cosa fa il controllo («Apri il carrello», non «icona») e aggiungi aria-hidden="true" all’SVG stesso.

  • Un banner dei cookie che intrappola il focus

    Assicurati che ogni pulsante del banner sia raggiungibile con Tab e utilizzabile con Invio o Spazio, che alla chiusura del banner il focus torni alla pagina e che un banner che non blocca la pagina non trattenga affatto il focus. Controlla le impostazioni del tuo strumento di gestione del consenso e aggiornalo se lo script è vecchio.

  • Contorni del focus rimossi nel CSS

    Cerca nei fogli di stile outline: none o outline: 0 su link, pulsanti e :focus. Sostituiscilo con uno stile visibile come :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }.

Domande su questo strumento

Questa verifica dell’accessibilità è gratuita?

Sì. Non serve registrarsi; devi solo confermare che il sito è tuo o che lo gestisci. Il Report Accessibilità a pagamento aggiunge fino a 20 pagine in più dalla tua sitemap, un percorso solo da tastiera, un controllo del reflow a 320 px, codice prima e dopo costruito dal tuo markup con errori, prompt per l’IA, un PDF e 5 nuovi test.

Quanta parte delle WCAG può testare uno strumento automatico?

Solo una parte. Una regola può controllare che un’immagine abbia un testo alternativo, non che il testo descriva l’immagine, e che un campo abbia un’etichetta, non che l’etichetta sia chiara. Considera i risultati come un elenco di problemi certi, poi testa il resto con la tastiera e uno screen reader.

Se la scansione non trova nulla, il mio sito è conforme all’ADA o alle WCAG?

No. Nessun test automatico può dimostrare che un sito è conforme alle WCAG o rispetta l’ADA, l’European Accessibility Act o qualsiasi altra legge. Un risultato senza errori significa che le regole automatiche non hanno trovato errori sulle pagine testate.

Posso verificare un sito di staging o pagine protette da login?

Le pagine protette da login, password o protezione anti-bot non possono essere testate. Se la tua protezione anti-bot blocca la scansione, consenti lo user agent FixReportsScanner oppure testa una copia di staging pubblica.

Ho corretto un problema. Perché il risultato sembra uguale?

I risultati per lo stesso indirizzo possono essere riutilizzati da una scansione dell’ultima ora. Aspetta che sia passata quell’ora e svuota l’eventuale cache della pagina o della CDN prima di ripetere il test.

Fonti

Strumenti correlati

Il Report Accessibilità ($174, una tantum) parte dalla scansione gratuita completa e aggiunge altre pagine, la modifica da fare per ogni problema rilevato, un PDF e nuovi test per verificare le tue correzioni.

Informazioni sul Report Accessibilità