Archivi categoria: Accessibilità

Verificare i siti con uno screen reader

Pubblicato il da

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

L’analisi è stata realizzata il 28 Settembre 2002

Ascolta l’Mp3 della Home Page di Yahoo! (640 Kbyte)

Visualizza la pagina della Home Page di Yahoo!

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.

Ascolta l’Mp3 della ricerca di Yahoo! (600 Kbyte)

Visualizza la pagina della ricerca di Yahoo!

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

L’analisi è stata realizzata il 28 Settembre 2002

Ascolta l’Mp3 della ricerca di Rai Sport (820 Kbyte)

Visualizza la pagina della ricerca di 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.

Building Accessible Web Sites

Pubblicato il da

Joe Clark, giornalista canadese, ha scritto un libro tutt’altro che canonico dedicato al mondo dell’accessibilità dei siti web.

Clark utilizza un approccio critico, pratico, quasi pedante. L’approccio di chi ha sbattuto più volte la testa e ha maturato una vasta esperienza sul campo. Clark è a dire il vero una persona che difficilmente risulta subito simpatica, come abbiamo scoperto intervistandolo via email e chiacchierando con lui via Icq.

Ma questo suo atteggiamento provocatorio, quando è rivolto al mondo dell’accessibilità web, diventa proficuo.

Se vi aspettate di leggere un manuale che tesse le lodi del W3c e del Wai siete fuori strada. Joe Clark è spesso critico rispetto alle linee guida Wai perché le giudica troppo generiche per essere efficaci e molto spesso in antitesi tra loro. Una scelta che può sembrare infelice, ma che l’autore motiva approfonditamente, tanto che alla fine vi troverete d’accordo con lui.

Secondo Clark con il termine accessibilità web si intende un sito utilizzabile proficuamente dalle persone disabili. Anche in questo cozza contro l’inflazionato incipit di Tim Berners Lee e ripreso dal Wai che vorrebbe un web accessibile universalmente da tutti, da chi ha un Pentium 90 a chi si diverte con i Pda. Ma Joe Clark è realista e sa che solo sulla carta un sito accessibile è un sito che funziona con ogni periferica.

Si tratta di un testo spesso controcorrente rispetto a quello che siamo soliti leggere a proposito dell’accessibilità web. Ecco qualche esempio:

  • rendere i caratteri dimensionabili via browser è inutile: per questo ci sono gli ingranditori di testo, ormai presenti per ogni piattaforma e molto più efficaci rispetto ai browser
  • l’uso dei Css è importante, ma usare i layout a tabella va altrettanto bene
  • Bobby è uno strumento inaffidabile per il test delle pagine: non provate neppure ad usarlo
  • i D-Link non devono essere impiegati: alterano in modo irrimediabile l’aspetto della pagina
  • meglio lasciare i campi delle form vuoti piuttosto che riempirli con del testo allo scopo di aiutare gli screen reader più datati

Joe Clark è un vero professionista perché analizza ogni caratteristica dell’accessibilità web in profondità. Il solo capitolo relativo alle immagini occupa 60 pagine e c’è spazio per ogni possibile cavillo riguardo il loro uso.

E’ bravo anche perché non cade in facili tranelli. Un esempio per tutti: è consapevole che l’attributo alt non dovrebbe essere visualizzato come suggerimento dai browser, a differenza dell’attributo title.

Alcune scelte sono a dire il vero discutibili: secondo l’autore bisognerebbe impiegare sempre l’attributo title oppure non utilizzarlo mai. Probabilmente non è il caso di essere così estremisti, soprattutto con l’accessibilità del contenuto di un sito.

Questo approccio pone senza dubbio dei problemi. Cosa facciamo: diamo retta a lui o alle linee guida del W3c? Utilizziamo i D-Link oppure no? Compiliamo i campi delle form o li lasciamo vuoti? Noi abbiamo la nostra opinione, molto vicina a quella dell’autore, e che trovate in ogni puntata del nostro corso di accessibilità web.

Joe Clark è convinto che poche linee guida sono sufficienti per garantire un buon livello di accessibilità: un uso corretto delle immagini partecipa da solo a metà del lavoro. Le divide così in 3 categorie (base, intermedia, avanzata) che corrispondono alla difficoltà e al lavoro richiesto per incorporarle nei proprio siti. Molte volte un livello base è già sufficiente per realizzare un sito discretamente accessibile.

L’autore eccelle, oltre che nella già citata accessibilità delle immagini, anche nell’indicare le strategie per realizzare filmati accessibili, in particolare con i sottotitoli e le descrizioni visive e sonore. Un argomento solo a prima vista banale, ma tra i più impegnativi per chi si occupa di accessibilità web. Proprio questo importante capitolo è quello che vi presentiamo in esclusiva: avete la possibilità di scaricarlo gratuitamente dal nostro sito.

In tema di accessibilità, va detto che il libro contiene un Cdrom allegato nel quale potete trovare (ad eccezione delle immagini) tutti i capitoli, oltre a risorse di approfondimento. Un aiuto indispensabili per gli utilizzatori di screen reader.

A noi il testo è piaciuto perché è un’analisi non banale al mondo dell’accessibilità web. Capirete quanto è ancora irto di spine il percorso di chi è impegnato in questa disciplina e quanto lavoro il Wai deve affrontare per aiutare realmente gli sviluppatori nella realizzazione di siti accessibili.

Siamo però ancora lontani da quello che vorremmo leggere a proposito di accessibilità web, ovvero che siamo di fronte ad una disciplina con un suo ciclo di vita e che necessita di adeguate figure professionali strettamente interconnesse con gli altri campi dello sviluppo in internet.

Non aspettatevi indicazioni sull’accessibilità di Java, dei file Pdf o di standard come Svg: l’autore ammette l’ignoranza in materia e li ha esclusi dal libro.

Se cercate invece un testo classico, che approndisca soprattutto il ruolo delle tecnologie e degli strumenti come screen reader e browser vocali, potreste trovare più interessante un manuale come Constructing Accessible Web Sites edito da glasshaus.

Capitolo gratuito

Grazie ad un nostro accordo con la casa editrice New Riders avete la possibilità di scaricare un intero capitolo in esclusiva. Si tratta del capitolo 13, Multimedia, a nostro avviso uno dei più riusciti del manuale.

Abbiamo chiesto a Joe Clark di introdurre l’argomento per i nostri lettori:

Il web è più vasto di una semplice rete di pagine Html. La multimedialità – il video e l’audio, oltre che Flash – è uno dei componenti più attraenti dell’esperienza nel web e per questo motivo deve essere accessibile alle persone disabili. Per realizzare delle presentazioni multimediali accessibili possiamo basarci su decenni di pratica della televisione, dei video e dei film ed usare i sottotitoli (per chi non sente) e le descrizioni audio (per chi non vede).

From Building Accessible Web Sites, Isbn 073571150X, Chapter 13, Copyright 2002.
Reproduced by permission of New Riders.

Scarica il capitolo “Multimedia” [Pdf, 2.4 MBytes]

Informazioni

Building Accessible Web Sites ¤ di Joe Clark ¤ pagine 430 ¤ prezzo 39.99 dollari ¤ lingua inglese ¤ edito da New Riders

Suggerimenti per un Flash accessibile

Pubblicato il da
  1. Ci parli di lei [Risposta 1]
  2. Di quali argomenti si occupa il manuale? C’è un sito collegato al libro? [Risposta 2]
  3. Qual è il problema di Flash e perchè ci sono così tanti esperti di usabilità che si scagliano contro il suo uso? [Risposta 3]
  4. Qual è la soluzione? Come possiamo migliorare l’usabilità in Flash? [Risposta 4]
  5. Parliamo di accessibilità. È possibile costruire siti Flash accessibili alle persone disabili? [Risposta 5]

Ci parli di lei

Sono un interactive designer che lavora in questo campo fino dai tempi di Mosaic. Precedentemente mi sono occupato di progetti multimediali (Cdrom, chioschi e interfacce grafiche per la televisione interattiva e il web).

Di quali argomenti si occupa il manuale? C’è un sito collegato al libro?

Il libro parla di come raggiungere il giusto equilibrio tra usabilità e design quando si costruisce un sito web con Flash. Il sito del manuale è http://www.flash99good.com/

Qual è il problema di Flash e perchè ci sono così tanti esperti di usabilità che si scagliano contro il suo uso?

Il problema non è propriamente Flash. Il problema è rappresentato dal modo con cui gli sviluppatori costruiscono i siti Flash.

Troppo spesso i progettisti Flash pensano che il “pensare tosto” venga prima dell’usabilità. L’immagine e la funzione possono vivere insieme serenamente, si tratta solo di impratichirsi.

Il problema più grande è che molti sviluppatori web hanno un passato di artisti e non possiedono solide basi nel campo dell’usabilità. Più i siti Flash diventano complessi e più diventa importante per i progettisti capire l’usabilità. Molti “guru” dell’usabilità si sono scagliati contro Flash solo perché molti siti Flash sono difficili da usare.

Qual è la soluzione? Come possiamo migliorare l’usabilità in Flash?

La soluzione per migliorare l’usabilità di Flash è che gli sviluppatori studino le tecniche che migliorano l’usabilità di un sito. Ecco alcuni suggerimenti tratti dal mio sito, dove potete trovare degli esempi completi da scaricare.

Chi e cosa?

La formula per un sito di successo si basa su 3 semplici passi:

  • capire a chi è rivolto il vostro sito
  • definire l’obiettivo del sito
  • realizzare il sito perché soddisfi i due punti precedenti!

Stabiliti gli utenti e la tipologia di sito è tempo di definire qualche regola. Scrivete queste regole prima di cominciare con la progettazione. Tenete i vostri utenti ed obiettivi in mente mentre programmate la navigazione e i contenuti. Attaccate dei PostIt sul monitor per aiutarvi a ricordare gli obiettivi.

Se state lavorando per una grande azienda cercate di approfittare delle loro sue interne per capire quale è il pubblico del vostro lavoro. Usate queste informazioni per creare le regole del sito. Se vi trovare a lavorare con delle tempistiche strette e dei budget esigui potete comunque ottenere queste informazioni realizzando interviste con i potenziali utenti.

Abilitate il pulsante “back” o almeno cercare di imbrogliarlo

Si tratta di un’accortezza veramente elementare, eppure è una cosa che frustra gli utenti di un sito Flash. Le persone navigano per ore e la cosa che utilizzano di più nel browser è il pulsante di “back“. Tuttavia, appena navigano del contenuto in un sito Flash, il pulsante di back ha l’unica funzione di portarli fuori dal sito, o, ancora peggio, lo sviluppatore toglie quell’interfaccia amichevole, indovinata e familiare dal browser, e con essa il pulsante “back“.

Approfondimento: Note di Macromedia su come costruire un pulsante di back personalizzato

Approfondimento: Il soprendente trucco di Robert Penners per il pulsante di back

Ridatemi la rotella del mouse!

Odio, ripeto, odio quando entro in un sito Flash e scopro che la rotellina del mouse è inutilizzabile! Se avete chilometri di testo nella finestra, lasciate che sia il browser a gestire lo scrolling. In questo modo è possibile utilizzare la rotellina del mouse senza dover continuamente cliccare sulle frecce. Questo può essere risolto predisponendo una finestra popup separata per il testo lungo.

Briciole di pane

No, non sto parlando di quelle sotto il vostro sofà! Se avete un sito che si espande in profondità con molti sottolivelli, creare una navigazione a briciole di pane (breadcrumb) all’inizio della pagina così che gli utenti abbiano modo di sapere dove si trovano nella gerarchia del sito. Create le etichette in modo che siano cliccabili, così che gli utenti possano ritornare alla pagina dalla quale sono venuti.

I font espressi in pixel e con anti-alias sono difficili da leggere

Fatemelo ripetere: i font espressi in pixel e con anti-alias sono difficili da leggere.
Sono troppo piccoli, anche per chi non usa gli occhiali!

Approfondimento: Tutorial “How to Keep Fonts Clear” da FlashKit.com

Ma il mio cliente vuole un’introduzione animata!

I clienti continuano a chiedermi di utilizzare questa tecnica della “vecchia scuola”. Molti non si rendono conto di quanto sia una pratica di web design ormai obsoleta (come i separatori di pagina orizzontali e animati).

Comunque, ci pagano il progetto e quindi dobbiamo eseguire. Una soluzione a questo problema è di inserire l’animazione in una finestra opzionale insieme a dei pulsanti di “play” e di “stop”. In questo modo non forzate gli utenti a scaricare un’animazione che non hanno richiesto, e li fate felici. Gli utenti possono avere un’anteprima dell’animazione, ma non sono obbligati a scaricarla tutta.

Spezzate i filmati Flash in più parti

Fate così. In questo modo gli utenti non vedranno degli eterni messaggi di caricamento (“loading…”) e l’animazione Flash sembrarà caricarsi più in fretta. Ricordati di provare le animazioni con una connessione a 56K. Se per qualche motivo dovete far attendere i vostri utenti, cercate di tenerli occupati: dategli un gioco o fategli qualche domanda di intrattenimento.

Consentire l’aggiunta ai preferiti

Quattro utenti su cinque utilizzando i bookmark per organizzare i loro siti preferiti. Spezzare il contenuto di un’animazione Flash in più parti consente agli utenti di aggiungere tutte queste sezioni ai preferiti. Un’altra opzione possibile è di abilitare il “bookmark button” all’interno del vostro contenuto Flash.

Realizzare degli elementi dell’interfaccia grafica che siano standard

Se progettate qualcosa come le form, assicuratevi che assomiglino a delle form. Assicuratevi che i text box lascino intendere che potete scriverci dentro del testo. Abilitate la possibilità di passare da un campo all’altro con il tabulatore. Realizzate gli altri elementi dell’interfaccia, come le scroll bar, in modo che si avvicino il più possible a quelle del sistema operativo.

Approfondimento: Note tecniche sull’uso della tabulazione nelle form

Verificate il vostro sito

Ok, avete realizzato un buon prodotto. Ora verificate il sito su tutte le possibili piattaforme usate dai vostri utenti. Osservate le persone mentre usano il sito. Hanno difficoltà a trovare quello che gli interessa? Le cose non sono abbastanza ovvie? Le animazioni o gli ActionScript sono lenti? Verificate fin dall’inizio e verificate spesso o preparatevi a pagarlo a caro prezzo.

Approfondimento: Suggerimenti sull’usabilità dal sito Macromedia

Parliamo di accessibilità. È possibile costruire siti Flash accessibili alle persone disabili?

Macromedia ha realizzato un’ottima documentazione su come costuire siti Flash per persone disabili.

Top