Verificare l’accessibilità di un sito
Una guida pratica per principianti
Il miglior modo per assicurarsi che un sito sia accessibile è progettarlo e realizzarlo fin dall’inizio accessibile. Ma, dato che le nostre esperienze sono spesso lontane dall’ideale… da dove si inizia a testare l’accessibilità di un sito?
Ho da poco raccolto una serie di problematiche legate all’accessibilità presenti sul sito dell’azienda per cui lavoro. Probabilmente 3–4 anni fa non avrei saputo da che parte iniziare, ma grazie ai miei #100ThoughtsOnInclusiveDesign, sono partita con qualche idea e qualche link utile.
Proverò a riproporre la mia esperienza, provando ad essere il più pratica possibile, nella speranza che possa essere utile a chi deve fare la stessa cosa.
Se invece avete bisogno di approfondire un po’ i temi di accessibilità, lascio in coda 3 suggerimenti utili.
Preparare gli strumenti
Come raccogliere le problematiche
Potete utilizzare questo template di Harvard University per raccogliere le problematiche che incontrerete.
Al suo interno troverete:
- una tabella dove raccogliere le problematiche;
- alcuni esempi di come cinpletarla;
- una lista dei criteri WACG 2.1 pronta all’uso;
- una Severity Matrix per aiutarvi a definire la gravità di ogni problematica.
Suggerimento: avere il template pronto all’uso fin da subito vi permette di personalizzarlo con tutto ciò di cui avete bisogno (link utili, la lista di cosa controllare e delle pagine da controllare — vedi sotto).
Cosa controllare
The A11y Project checklist è un’ottima traccia per aiutarvi a decidere che cosa controllare nelle pagine che testerete.
Questa checklist è completa ed esaustiva e potete usarla direttamente online. Nella mia analisi non ho controllato tutto: ho scelto gli elementi più rilevanti per me (ad esempio al momento non era tra gli obiettivi controllare l’accessibilità di alcuni media specifici).
Vi suggerisco poi di fare una lista di tutte le pagine e flussi che dovrete controllare. Ed è tutto pronto per partire!
Strumenti e metodi per testare
Ci sono moltissimi strumenti per controllare i vari aspetti dell’accessibilità.
Ho deciso di utilizzare queste estensioni del browser per un primo controllo generale:
- Wave (disponibile per Firefox, Chrome, Edge e online), che elenca in maniera puntuale molte problematiche (alt-text, etichette dei form, gerarchia di pagina e ordine dei contenuti, ecc.);
- Web Disability Simulator (Chrome) e Silktide (Chrome) per avere un’idea generale di come alcuni utenti vedranno il sito (colori e contenuti).
Nota: molte problematiche (principalmente quelle che hanno a che fare con il contenuto) sono identificabili solo con un controllo manuale; ho quindi affiancato alcune tecniche più manuali a questi strumenti: cercherò di spiegare passo passo cosa ho fatto.
Cosa ho controllato
1. Lingua della pagina
Per ogni pagina controllate che sia impostato il tag <lang> in HTML e che sia impostato nella lingua in cui effettivamente la pagina è scritta.
Perché è importante? Gli screen reader si baseranno su questa informazione per leggere il testo sulla pagina e lo leggeranno con la pronuncia della lingua impostata.
Come controllarlo? WAVE individua se il tag <lang> è impostato, ma non indica se è coerente con il testo effettivamente scritto in pagina: leggete la pagina o fatela leggere da uno screen reader per verificare se ci sono incoerenze. Sfortunatamente, se non conoscete la lingua in cui è scritta la pagina identificare il problema può non essere semplice.
2. Titolo di pagina (title)
Perché è importante? Il tag <title> identifica la pagina. Aiuta l’utente ad orientarsi: i browser lo mostrano come nome della scheda (se ci sono più schede aperte) ed è la prima cosa che uno screen reader legge.
Come controllarlo? Potete guardare l’etichetta della scheda del browser, ma, se è troppo lungo, potete controllare nel codice HTML.
Cosa controllare?
- è breve e descrive la pagina;
- diversifica la pagina dalle altre pagine del sito;
- ha in testa le informazioni più importanti (es: Chi siamo | Nome del sito).
3. Titolazioni (headings)
Verificate che per ogni pagina ci sia un <h1>. Descrive il contenuto della pagina (come fa il tag <title>). Dovrebbe essercene solo uno: avere più di un H1 non è proibito ma, siccome dovrebbe evidenziare il tema principale della pagina, è meglio tenere basso il livello di entropia!
I titoli da <h2> ad <h6> sono utili ad esprimere la gerarchia delle informazioni, quindi non ha senso saltare livelli.
Perché è importante? Le titolazioni sono utili a capire l’organizzazione della pagina, soprattutto per le persone con disabilità cognitive e per gli utenti che usano tastiere e screen reader.
Come controllarlo? Strumenti come WAVE evidenzieranno la presenza dei vari livelli di titolazione; il contenuto invece è da controllare manualmente.
4. Tastiera
Assicuratevi che la pagina sia navigabile da tastiera, che ogni elemento attivo abbia un focus visibile e che la gerarchia di pagina sia rispettata.
Perché è importante? Spesso chi usa uno screen reader utilizza la tastiera per navigare, ma anche persone con tremori potrebbero usare una tastiera al posto del mouse.
Come controllarlo? Manualmente, con la vostra tastiera (usate il tasto tab per muovervi tra gli elementi).
5. Colore
Questo articolo è un’ottima lettura su colore e accessibilità.
Ecco un breve riassunto:
3.1) Controllate che il contrato testo-sfondo sia sufficiente, sulla pagina, ma anche per ogni bottone, banner o elemento.
Come controllarlo? Il colore degli elementi in primo piano e il colore di sfondo dovrebbero avere un contrasto di 4.5:1 per il livello AA e di 7:1 per il livello AAA. Non preoccupatevi se questi numeri non vi dicono molto: fortunatamente gli strumenti automatici evidenzieranno per voi ogni criticità. Io ho usato direttamente WAVE ma anche questo contrast checker o questo generatore di palette accessibili possono tornare utili.
3.2) Assicuratevi che il colore non sia usato come unico mezzo per veicolare informazioni, per esempio in un messaggio d’errore, nella spiegazione di un esercizio, nel visualizzare dati, ecc.
Perché è importante? Le persone daltoniche potrebbero non percepire quell’informazione.
Come controllarlo? Estensioni come Web Disability Simulator e Silktide possono mostrarvi la pagina così come la vedrebbe una persona daltonica, sarà così molto semplice identificare questo tipo di problematiche.
6. Alt-text nelle immagini
Perché è importante? <alt-text> fornisce una descrizione delle immagini che gli screen reader leggono. Potrebbe tornare utile anche a chi ha una connessione lenta perché fornisce del contesto prima che le immagini siano completamente caricate.
Come controllarlo? Strumenti automatici (come Wave) vi diranno se un alt-text è presente o meno, ma non possono dirvi se ciò che c’è scritto è appropriato al contesto. Il modo più facile per controllare manualmente se c’è un alt-text e se è utile é, secondo me, disattivare le immagini sulla pagina (in Chrome dovete solo cliccare sul lucchetto sulla barra di navigazione e aprire il menu delle impostazioni).
Come controllare se è appropriato? Ecco qualche approfondimento (in inglese) ;)
- Come scrivere una descrizione immagine (How to write an image description)
- Fate questi 5 errori quando scrivete un alt-text? (Are you making these five mistakes when writing alt text?)
- Come scrivere gli alt-text (How to write alt-text descriptions for image accessibility)
- Se avete a che fare con oggetti complessi e avete bisogno di qualche suggerimento, lo trovate qui.
7. Bottoni e link
Verificate che i bottoni e i link abbiano un testo/microcopy utile, che spiega che azione faranno o dove vi porteranno.
Perché è importante? Sapere cosa succederà è utile a tutti, ma in particolare persone con disabilità cognitive beneficeranno di più contesto e spiegazioni. Anche chi utilizza uno screen reader lo troverà utile.
Come controllarlo? Manualmente, magari ascoltando uno screen reader leggere la pagina.
8. Form
È fondamentale che i form siano navigabili da tastiera. Ma è anche importante che ad ogni campo sia associata un’etichetta.
Perché è importante? Le etichette danno contesto e sono utili a chi utilizza uno screen reader.
Come controllarlo? WAVE può aiutarvi a capire se per ogni campo di un form è presente un’etichetta. L’utilità e la coerenza dell’etichetta invece va controllata a mano.
9. Errori
Prevenite la possibilità che si verifichi un errore dando istruzioni chiare e guidando l’utente, ma quando è necessario mostrare un errore assicuratevi che:
- gli errori siano facilmente identificati e che il messaggio di errore sia fisicamente vicino al problema;
- gli errori siano scritti in modo semplice, che chiunque possa capire, senza uso di gergo tecnico;
- il colore non sia l’unica modalità per identificare un errore.
Perché è importante? Messaggi d’errore ben progettati (Designing better error messages) sono utili a tutti, ma sono necessari, per capire dove si trova l’errore e come gestirlo, per le persone che usano uno screen reader, per le persone con disabilità visive che usano una lente di ingrandimento, per chi ha disabilità cognitive e per chi è daltonico.
Come controllarlo? Sfortunatamente non solo dovrete controllarlo manualmente, ma alcuni errori sono difficili da riprodurre. Provate a “ stressare” la pagina, ma chiedete anche una lista di tutti i messaggi a chi ha sviluppato la pagina.
E poi?
Decidete la gravità di ogni problematica e decidete a cosa dare priorità. Definite anche chi è responsabile di quell’attività (troverete entrambe le cose nel template suggerito ad inizio articolo).
Dopodiché mettere in pausa la parte di testing e iniziate a sistemare le problematiche.
