Questo articolo fa parte di un corso gratuito di accessibilità web ospitato su questo sito.

Scritto in collaborazione con Nicola Ferrando.

Nella scorsa puntata del corso abbiamo avuto modo di conoscere gli strumenti che aiutano i non vedenti e gli ipovedenti nella fruizione di un sito web.

Screen reader e browser vocali possono anche essere utilizzati dagli sviluppatori per verificare il livello di accessibilità della pagina, senza però dimenticare che il pubblico di un sito accessibile è più esteso e comprende altre categorie. Si tratta quindi di un test necessario, ma non sufficiente, per verificare l’accessibilità di un sito web.

Per capire come sia possibile realizzare un test utilizzando uno screen reader vi proponiamo tre esempi tratti da siti web famosi, in particolare la home page e la pagina di ricerca di Yahoo! Italia e la home page di Rai Sport.

Abbiamo scelto di non analizzare un sito costruito appositamente per soddisfare le linee guida Wai così da evidenziare le problematiche che deve affrontare chi deve affidarsi ad uno screen reader per leggere il contenuto di una pagina.

Siamo anche consci del fatto che è sempre molto semplice evidenziare le lacune di un sito, piuttosto che presentare validi esempi di buona accessibilità. Questi non sono quindi test di siti, ma casi d’uso da riportare alle vostre pagine.

Yahoo! Italia

Il frammento audio mostra quello che lo screen reader Jaws legge usando il comando “leggi tutto”, cioè il comando che interpreta l’intera pagina dall’inizio alla fine. Jaws scandisce automaticamente la pagina non appena viene caricata, ma è possibile interrompere la lettura in qualsiasi momento per esplorare con calma la pagina utilizzando i normali tasti di scorrimento del testo (tasti freccia, pagina giù, ecc.).

Il file è stato troncato: dura meno di 2 minuti, ma la lettura completa della homepage di Yahoo! ne richiede più di 4.

Quasi tutti gli elementi grafici sono completati dall’attributo alt, che viene regolarmente letto dalla sintesi vocale dopo la parola “grafico”.

Non è invece presente una etichetta che indichi immediatamente il significato del campo editazione che si incontra dopo la prima serie di link. Naturalmente la presenza del pulsante “Cerca” ben evidenziato immediatamente dopo al campo di immissione (che Jaws chiama “editazione”) non lascia dubbi. Inoltre tutti sanno che Yahoo! è nato come motore di ricerca, anche se con il tempo si sono aggiunti una serie sterminata di servizi, quali mail, gruppi, chat, ecc.

I servizi Mail e Gruppi sono perfettamente gestibili, ma lo stesso non si può dire per le Chat, a causa dell’intrinseca struttura di tali pagine, che prevedono un refresh continuo dello schermo con la comparsa di nuovi messaggi e l’uso di emoticons.

Nel secondo frammento audio si può ascoltare la lettura automatica della pagina contenente i risultati di una ricerca (abbiamo cercato la stringa “accessibilità siti web” ed abbiamo ottenuto 3 risultati).

Questa informazione ci viene fornita abbastanza presto, dopo circa 20 secondi, ma solo dopo altri 30 secondi inizieremo a leggere l’elenco dei risultati. Questo è dovuto al fatto che sulla sinistra dello schermo c’è il menu, che non è possibile saltare con un link del tipo “salta la barra di navigazione”, né sono offerti altri strumenti di orientamento, quali ad esempio le intestazioni (tag h1-h6) che consentano di individuare le diverse sezioni in cui è suddivisa la pagina web.

Rai Sport

Ascoltando il terzo frammento audio si nota subito la presenza di molti link grafici non commentati. In questo caso Jaws non può far altro che leggere il contenuto dell’attributo href del link che contorna l’immagine.

La recente versione 4.50 legge invece il nome del file associato al link: in taluni casi ciò permette di comprendere il significato del link. Se ad esempio l’immagine si chiama menucalcio.gif, si può immaginare che seguendo quel link si accederà alla sezione del sito dedicata al calcio. Tuttavia si tratta di un palliativo che non sempre funziona. Pensate ad esempio ai link che vengono costruiti con l’immagine di un pallino seguita dal testo descrittivo, che però non è cliccabile.

In questo caso il nome dell’immagine non varia e l’unico modo per capire dove porta il link, oltre a leggere il testo che lo segue, è esaminare il nome del file Html che verrà caricato. Questo è ciò che accadeva fino a poco tempo fa nelle sezioni interne del sito di Repubblica. Ora fortunatamente i link sono costituiti dai titoli degli articoli e ciò ne consente una chiara comprensione anche se avulsi dal contesto, come accade se si utilizza la funzione dello screen reader che consente di accedere all’elenco di tutti i link presenti sulla pagina web.

Tornando alla home page del sito di RaiSport, noterete che l’utente rimane ignaro del fatto che nella pagina sono presenti diverse applet, in particolare l’oggetto incorporato che consentirebbe di ascoltare e vedere l’ultimo Tg sportivo. Purtroppo gli oggetti di tipo embedded sono molte volte inaccessibili, in quanto lo screen reader non ha alcuno strumento per gestirli. Bisognerebbe accompagnare tali oggetti con un link di tipo tradizionale che consenta di accedere alla risorsa multimediale.