Archivi tag: corso

L’accessibilità web e i browser – Supporto all’Html accessibile

Pubblicato il da

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

Progettare e costruire un sito accessibile prevede il rispetto di alcune linee guida e la verifica dei risultati ottenuti con screen reader, browser e browser di testo.

Purtroppo, il supporto dei browser ai tag e agli attributi accessibili è vario e alquanto carente. Anche se una persona disabile usa probabilmente un software dedicato, una maggiore aderenza agli standard è sicuramente auspicabile, così da evitare allo sviluppatore di ricorrere a soluzioni “ad interim”.

Per i test sono prese in esame le piattaforme:

  • Windows 2000
    • Internet Explorer 5
    • Internet Explorer 5.5
    • Internet Explorer 6
    • Netscape 4.7
    • Netscape 6.2
    • Netscape 7.0 pr1
    • Mozilla 1.0
    • Opera 5
    • Opera 6
  • Mac Os 9.1
    • Internet Explorer 5
    • Netscape 4.7
    • Netscape 6.2
    • Mozilla 1.0
    • iCab 2.8
    • Opera 5

Una pagina per il test di “conformità”

Abbiamo realizzato una semplice pagina di test contenente i tag normalmente usati per migliorare l’accessibilità di un documento Html.

Nella pagina sono presenti:

  • un menu realizzato come link ipertestuali, ognuno dei quali raggiungibile con scorciatoia da tastiera (in particolare con 1,2,3) e con un ordine di tabulazione dato dall’attributo tabindex
  • una form per un’iscrizione fittizia, che utilizza:
    • il tag fieldset e il tag legend per raggruppare elementi della form concettualmente simili
    • il tag label per associare esplicitamente un’etichetta al campo della form
    • l’attributo tabindex per modificare l’ordine di tabulazione all’interno dei campi
    • un tag optgroup utilizzato, all’interno di una combo-box, per raggruppare gli elementi in sottocategorie
  • una lista di acronimi realizzati con il tag acronym
  • una serie di abbreviazioni con il tag abbr
  • una tabella che sfrutta i tag th, caption e l’attributo summary
  • una image map che utilizza l’attributo alt
  • una image map che utilizza l’attributo title
  • una immagine con una descrizione estesa riferita dall’attributo longdesc
  • l’attributo title inserito in un link
  • l’attributo title inserito in un’immagine

I risultati del test

I risultati della pagina sono molto vari tra le diverse piattaforme.

Netscape 4.7

Data l’età, il supporto di Netscape 4.7 è piuttosto scadente:

  • non sono riconosciuti i tag fieldset e legend delle form
  • non sono raggruppati gli elementi della combo-box
  • non è possibile utilizzare i tasti di scelta rapida e nemmeno l’ordine di tabulazione
  • sono ignorati gli attributi title per i link e le immagini
  • non sono visualizzate le abbrevazioni e gli acronimi
  • sono visualizzati gli attributi alt nelle immagini, ma non nelle image map
Form in Netscape 4.7 senza fieldset e optgroup
Netscape 4.7: non vengono riconosciuti i tag e gli attributi che rendono le form accessibili e neppure optgroup per le combobox

Netscape 6+ / Mozilla

Con Netscape 6+ e Mozilla le cose migliorano sensibilmente: sono riconosciuti correttamente molti tag ed attributi.

I limiti principali di questa versione rimangono:

  • mancata visualizzazione degli alt nelle image map (ma non del tag title)
  • scadente gestione delle tabulazioni all’interno della pagina: è vero che l’attributo tabindex viene correttamente riconosciuto, ma procedendo con la tabulazione il browser non scrolla la pagina per posizionarsi sugli elementi non a video

Molto buona la gestione degli acronimi e delle abbreviazioni, che compaiono come parole sottolineate, delle virgolette (tag q) e del tag optgroup, visualizzato come intestazione agli elementi.

Netscape 6 supporta acronimi e abbreviazioni
Netscape 6: vengono gestiti correttamente sia gli acronimi sia le abbreviazioni, evidenziandoli con una sottolineatura tratteggiata
Netscape 6 supporta le form accessibili
Netscape 6: le form accessibili sono visualizzate correttamente e sono anche raggruppati eventuali elenchi presenti in un optgroup

Cominciano timidamente a farsi vedere gli attributi longdesc, anche se per visualizzare la pagina è necessario posizionarsi sull’immagine, scegliere “Proprietà” dal menù contestuale e cliccare sul link della descrizione.

Netscape 6 visualizza le pagine di descrizione per le immagini
Netscape 6: è possibile aprire una finestra di proprietà per le immagini che contiene un link al file di descrizione specificato nell’attributo longdesc. Il metodo è effettivamente un po’ laborioso, ma funziona.

Internet Explorer Windows

Anche Internet Explorer 5+ ha un buon supporto per l’accessibilità, anche se in alcuni punti (come gli acronimi), potrebbe essere migliorato, per esempio sottolineando le voci, come fa Netscape. Dalla versione 6 Windows anche il tag optgroup per raggruppare gli elementi di una combo-box è interpretato correttamente.

Internet Explorer visualizza gli acronimi ma non li evidenzia
Internet Explorer 6 per Windows: vengono visualizzati gli acronimi se vi si posiziona il muose, ma non sono evidenziati

Internet Explorer Macintosh

Anche la versione 5 Mac gestisce optgroup, ed è forse il browser che visualizza i gruppi nel modo più efficace.

Internet Explorer 5 per Mac visualizza gli optgroup come più livelli di menù a tendina
Internet Explorer 5 per Mac: visualizza gli optgroup come più livelli di menù a tendina, una soluzione davvero efficace

Opera

Opera, in entrambe le versioni provate, non ha brillato per il suo riconoscimento dei tag accessibili. Solo con la versione 6 si comincia a vedere qualche timido miglioramento, soprattutto nelle form.

Opera 6 ha un supporto limitato per le form
Opera: nella versione 6 gestisce l’attributo fieldset, ma non l’optgroup

iCab

iCab per Macintosh include un’interessante opzione: visualizza tra parentesi i tasti di scelta rapida (accesskey) per le scorciatoie da tastiera.

È inoltre possibile richiedere, dal menu contestuale, l’apertura in una nuova finestra del file assegnato ad un’immagine con l’attributo longdesc, un po’ più rapidamente che in Netscape.

iCab visualizza i tasti di scelta rapida tra parentesi angolate
iCab: visualizza delle parentesi angolate nelle quali sono evidenziati i tasti di scelta rapida (accesskey) raggiungibili da tastiera.

Tabelle riassuntive

Segue una serie di tabelle con i dettagli del test.

Non è presentata una scheda riepilogativa con il supporto alle tabelle accessibili in quanto tutti i browser provati visualizzano correttamente i tag.

Se riesci a provare la pagina di esempio con un browser e una piattaforma non presente nella lista (ad esempio Linux), contattaci così che possiamo includere i risultati della tua prova e creare un elenco più completo, a disposizione di tutti.

Form

Nella tabella è evidenziato il supporto dei browser ai tag fieldset e optgroup che consentono di raggruppare rispettivamente i campi di una form e gli elementi di una combo-box.

È anche evidenziata la possibilità o meno di muoversi correttamente nelle form utilizzando il tabulatore secondo l’ordine definito dall’attributo tabindex.

Accessibilità delle form
Browser Fieldset Optgroup Tabindex
Windows 2000
Internet Explorer 5 Sì No Sì
Internet Explorer 5.5 Sì No Sì
Internet Explorer 6 Sì Sì Sì
Netscape 4.7 No No No
Netscape 6.2 Sì Sì Parz.
Netscape 7.0 pr1 Sì Sì Parz.
Mozilla 1.0 Sì Sì Parz.
Opera 5 No No No
Opera 6 Sì No No
Mac Os 9.1
Internet Explorer 5 Sì Sì Sì
Netscape 4.7 No No No
Netscape 6.2 Sì Sì Parz.
Mozilla 1.0 Sì Sì Parz.
iCab 2.8 Sì Sì No
Opera 5 No No No

Nota: Netscape 6+ e Mozilla gestiscono l’attributo tabindex, però hanno qualche difficoltà nel visualizzare l’oggetto che ha il “fuoco” fuori della parte visibile dello schermo.

Una curiosa particolarità: mentre Internet Explorer considera i radio button come una sola entità quando si usa il tabulatore, Netscape 6+ e Mozilla distinguono ognuna delle opzioni del controllo.

Testo

I tag Html offrono la possibilità di arricchire il testo con abbreviazioni, acronimi, citazioni, che dovrebbero essere interpretate dal browser. Nella tabella, “virgolette” si riferisce al supporto del tag q, mentre citazioni indica il tag blockquote.

Accessibilità del testo
Browser Acronimi Abbreviazioni Virgolette Citazioni
Windows 2000
Internet Explorer 5 Parz. No No Sì
Internet Explorer 5.5 Parz. No No Sì
Internet Explorer 6 Parz. No No Sì
Netscape 4.7 No No No Sì
Netscape 6.2 Sì Sì Sì Sì
Netscape 7.0 pr1 Sì Sì Sì Sì
Mozilla 1.0 Sì Sì Sì Sì
Opera 5 Parz. Parz. Sì Sì
Opera 6 Parz. Parz. Sì Sì
Mac Os 9.1
Internet Explorer 5 Parz. Parz. Sì Sì
Netscape 4.7 No No No Sì
Netscape 6.2 Sì Sì Sì Sì
Mozilla 1.0 Sì Sì Sì Sì
iCab 2.8 Sì Sì Sì Sì
Opera 5 Parz. Parz. Sì Sì

Nota: Internet Explorer visualizza correttamente gli acronimi. A differenza di Netscape e Mozilla, però, non dà indicazioni sulla presenza dell’acronimo, per esempio sottolineandolo, rendendo così difficile il suo riconoscimento. È comunque possibile utilizzare delle regole Css per simulare il comportamento di Netscape. La stessa cosa vale per Opera, che in più visualizza anche le abbreviazioni.

Link

È possibile estendere le informazioni dei link con l’attributo title. Inoltre, è prevista dall’Html la possibilità di introdurre delle scorciatoie da tastiera e di navigare i link con il tabulatore.

Accessibilità dei link
Browser Title Accesskey Tabindex
Windows 2000
Internet Explorer 5 Sì Sì Sì
Internet Explorer 5.5 Sì Sì Sì
Internet Explorer 6 Sì Sì Sì
Netscape 4.7 No No No
Netscape 6.2 Sì Sì Parz.
Netscape 7.0 pr1 Sì Sì Parz.
Mozilla 1.0 Sì Sì Parz.
Opera 5 Sì No No
Opera 6 Sì No No
Mac Os 9.1
Internet Explorer 5 Sì Sì Sì
Netscape 4.7 No No No
Netscape 6.2 Sì Sì Parz.
Mozilla 1.0 Sì Sì Parz.
iCab 2.8 Sì Sì No
Opera 5 No No No

Immagini

Anche per le immagini è possibile utilizzare l’attributo title, mentre invece l’attributo longdesc consente di collegare una pagina di dettaglio dell’immagine.

Accessibilità delle immagini
Browser Alt Title Longdesc
Windows 2000
Internet Explorer 5 Sì Sì No
Internet Explorer 5.5 Sì Sì No
Internet Explorer 6 Sì Sì No
Netscape 4.7 Sì No No
Netscape 6.2 Sì Sì Parz.
Netscape 7.0 pr1 Sì Sì Parz.
Mozilla 1.0 Sì Sì Parz.
Opera 5 Sì Sì No
Opera 6 Sì Sì No
Mac Os 9.1
Internet Explorer 5 Sì Sì No
Netscape 4.7 Sì No No
Netscape 6.2 Sì Sì Parz.
Mozilla 1.0 Sì Sì Parz.
iCab 2.8 Sì Sì Sì
Opera 5 Sì Sì No

Nota: la gestione dell’attributo longdesc è ancora un po’ troppo precaria e complessa in Netscape 6+ e Mozilla per considerarla definitiva.

Image Maps

Sia l’immagine sia le aree della mappa consentono di specificare l’attributo alt, anche se questa seconda possibilità non viene visualizzata sullo schermo quando si disabilitano le immagini. Sarebbe utile riuscire a vedere i contorni delle area anche quando l’immagine non viene caricata, e trovare all’interno le descrizioni alternative.

Accessibilità delle image map
Browser Alt (immagine) Alt (area) Title (area)
Windows 2000
Internet Explorer 5 Sì Sì Sì
Internet Explorer 5.5 Sì Sì Sì
Internet Explorer 6 Sì Sì Sì
Netscape 4.7 Sì No No
Netscape 6.2 Sì No Sì
Netscape 7.0 pr1 Sì No Sì
Mozilla 1.0 Sì No Sì
Opera 5 Sì No Sì
Opera 6 Sì No Sì
Mac Os 9.1
Internet Explorer 5 Sì No Sì
Netscape 4.7 Sì No No
Netscape 6.2 Sì No Sì
Mozilla 1.0 Sì No Sì
iCab 2.8 Sì No Sì
Opera 5 Sì No No

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.

Screen reader, display braille e browser vocali

Pubblicato il da

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

Aggiornamento Febbraio 2006: Accessibilità web, lo stato dell’arte per gli screen reader

Scritto in collaborazione con Nicola Ferrando

L’uso di un sito web da parte delle persone disabili può avvenire anche grazie all’utilizzo di software o hardware dedicati.

Come sviluppatori e designer è importante che ci rendiamo conto di quali sono le possibilità e le difficoltà date dall’uso di questi strumenti. In questo modo matureremo delle conoscenze e costruiremo delle solide basi che ci aiutano nella progettazione e realizzazione di siti web accessibili.

In questo articolo prenderemo in esame i dispositivi in aiuto agli ipovedenti e ai non vedenti. Sappiamo bene che l’accessibilità web si rivolge ad un pubblico vasto (non solo le persone disabili nè tantomeno i soli non vedenti), ma è utile esaminare questo contesto perché:

  • sono disponibili prodotti ormai maturi e consolidati
  • possiamo eseguire agevolmente dei test per valutare l’accessibilità dei siti web

Screen reader

Gli screen reader, o lettori di schermo, sono degli applicativi che di
solito vengono eseguiti all’avvio del computer per consentire all’operatore
non vedente di avere fin da subito il controllo del sistema operativo. Questi
programmi trasformano in voce il testo che appare sullo schermo.

Le lingue selezionabili in Jaws

Nei Pc multimediali la voce sintetizzata viene prodotta attraverso la scheda audio
e le relative casse, ma esistono anche dispositivi esterni dedicati a
questa funzione, in modo da limitare l’uso della Cpu e della scheda audio.

Comunque, ormai il 90% dei ciechi utilizza la scheda audio del Pc, in quanto
questa soluzione è molto più economica di quella con hardware dedicato.

Il costo dello screen reader può variare dai 500 ai 1500 euro, mentre una
sintesi vocale hardware può costare anche 800 euro.

In Italia attualmente vengono commercializzati quattro screen reader:

  1. Jaws per Windows di Freedom Scientific
  2. Window-Eyes di GW-Micro
  3. OutSpoken di Alva-BV
  4. Hal per Windows di Dolphin Computer Access

Per i test e le dimostrazioni di questo articolo, abbiamo scelto la versione 4 di Jaws.

Display braille

Insieme alla funzione di sintesi vocale, presente in tutti gli screen reader
moderni, esiste anche un altro dispositivo hardware che può essere collegato
al pc: si tratta del display braille.

Un display braille

Questo dispositivo riproduce in alfabeto braille ciò che appare sullo schermo. Sono però pochi i ciechi che utilizzano questo strumento, sia per il suo costo elevato (si va dai 2500
euro per un display da 20 caratteri fino a 7000 euro per uno da 80
caratteri), sia perché sono pochi i non vedenti che conoscono l’alfabeto
braille.

Bisogna ricordare che il Dm Sanità 332/99 prevede che questi strumenti siano forniti come protesi dal servizio sanitario nazionale, quindi dalle
Asl. Tuttavia la normativa è assai farraginosa, per cui spesso risulta difficile usufruire di queste agevolazioni.

Browser vocali

A questa categoria appartengono i software realizzati esplicitamente per la navigazione dei siti web.

Rispetto agli screen reader, che sono strumenti per il controllo generico del sistema operativo e delle applicazioni, un browser vocale può essere utilizzato esclusivamente durante la visita ad un sito web oppure per scaricare la posta elettronica da una finestra del browser dedicata.

Proprio perché si tratta di un’applicazione ad hoc, generalmente è più semplice utilizzare un browser vocale in quanto è dotato di menù standard. Per comandare uno screen reader è invece necessario utilizzare delle combinazioni di tasti che non si trovino in conflitto con quelle normalmente utilizzate dalle applicazioni che il sistema operativo sta eseguendo.

I lettori vocali potrebbero così rappresentare una utile soluzione da impiegare nelle postazioni pubbliche di accesso a Internet, come ad esempio le biblioteche.

Ibm Home Page Reader è l’unico browser vocale degno di nota e dispone di un buon supporto ai tag ed attributi dell’Html accessibile.

FucinaWeb letto con Ibm Home Page Reader

Oltre a riconoscere il cambio di lingua all’interno del testo (sempre che chi realizza le pagine utilizzi l’attributo lang e l’utente configuri il reader perché riconosca automaticamente la variazione) riesce ad interpretare in modo efficace i numerosi tag e attributi per una navigazione efficace all’interno delle tabelle.

L’operatore ha la possibilità di modificare la modalità di esecuzione di Home Page Reader così da spostarsi agevolmente tra paragrafi, oppure tra link, intestazioni e frame.

Il costo di Ibm Home Page Reader si aggira intorno ai 170 euro.

E’ da segnalare anche Connect Outloud di Freedom Scientific, che è sostanzialmente
una versione limitata di Jaws in grado di gestire solamente Internet Explorer e Outlook Express per la posta elettronica. Il suo funzionamento è identico al funzionamento dello screen reader nelle pagine web, ma ovviamente il suo costo è inferiore (intorno ai 350 euro).

Va comunque detto che questi programmi dedicati sono poco diffusi, in quanto chi acquista un
computer vuole usarlo in tutti i suoi aspetti, quindi preferisce acquistare
uno screen reader piuttosto che singoli programmi dedicati a funzioni
particolari.

Funzionamento

Per chi non può vedere il monitor, una grossa difficoltà è data dal non avere una panoramica del contenuto della pagina: può solo cominciare a leggerne il contenuto con lo screen reader, saltare tra le intestazioni o selezionare un link tra quelli presentati.

L’università di Wisconsin-Madison ha realizzato due video in cui questo concetto è stato ben espresso e dove potete trovare diversi suggerimenti su come realizzare pagine accessibili, oltre ad un’ottima introduzione al funzionamento degli screen reader.

E’ comunque impensabile che lo screen reader o i browser vocali leggano proprio tutto quello che appare sullo schermo.

Funzionamento generale di uno screen reader

Lo screen reader dispone di meccanismi che selezionano di volta in volta quale testo vocalizzare. Se ad esempio si apre il menu Start, lo screen
reader legge la prima voce del menu. Se ci si sposta con i tasti freccia, la
sintesi leggerà le varie voci del menu e darà informazioni aggiuntive, ad
esempio indicando se una determinata voce ha un sottomenu.

Lo screen reader fornisce anche messaggi che aiutano ad orientarsi, ad es. avverte se si è aperta una finestra di dialogo, se si è chiuso un menu, ecc. In una finestra di dialogo dà informazioni sui diversi elementi (ad esempio indica se
ci troviamo su un pulsante, su una lista di elementi, su un campo
editazione, ecc.).

Lo screen reader rende disponibile un sistema di emulazione del mouse, cioè consente
di spostare il puntatore del mouse mediante le frecce e di simulare il click
sinistro e destro. Inoltre è possibile esplorare lo schermo, cioè leggere lo
schermo dall’alto verso il basso senza influire né sulla posizione del
cursore del computer, che del resto spesso non si può spostare liberamente
sullo schermo, né sulla posizione del mouse.

Durante l’esplorazione dello
schermo con o senza spostamento del puntatore del mouse, lo screen reader
legge qualsiasi testo che incontra, ma ovviamente non è in grado di
interpretare le icone o di leggere il testo presente al loro interno sotto
forma di immagine.

Per questo motivo, nel realizzare una pagina web, è importante utilizzare tutti i tag a disposizione per facilitare la lettura da parte di uno screen reader.

In questo caso particolare può essere impiegato l’attributo alt e assegnarli una descrizione breve ma completa dell’immagine che lo contiene. Vedremo nella parte pratica del corso come e quando utilizzare questo attributo. Se invece l’attributo non è presente lo screen reader indica semplicemente la presenza di un elemento grafico. E’ possibile assegnare a questo elemento grafico
un nome che verrà letto ogni volta che lo si incontrerà di nuovo.

Funzionamento con le pagine web

Inizialmente gli screen reader si
limitavano a leggere in maniera sequenziale dall’alto verso il basso e da
sinistra verso destra il testo che appariva sullo schermo. Purtroppo le
pagine web sono particolarmente complesse e così spesso il testo è disposto su più
colonne affiancate, vi sono elementi grafici e animazioni, così la
navigazione risultava assai difficile.

Oggi gli screen reader entrano in una particolare modalità quando si accorgono che è in esecuzione un browser e tentano di interpretare la struttura della pagina attualmente visualizzata.

In particolare, con l’introduzione di Internet Explorer 5, Microsoft ha fornito una libreria (Msaa) contenente una serie di funzioni cui gli screen reader possono appoggiarsi per presentare le pagine web in maniera alternativa.

Jaws e Window-Eyes hanno
sviluppato un sistema che di fatto consente di scorrere le pagine web con i
tasti freccia come se ci si trovasse in un word processor. Le pagine vengono
decolonnizzate (o linearizzate), cosicché il testo viene letto secondo un ordine logico.

Vengono descritti i principali elementi: in presenza di un link lo
screen reader dirà “link” seguito dal testo che lo contraddistingue.

Tutto ciò spiega perché il 90% dei ciechi utilizza Internet Explorer e come
screen reader Jaws o Window-Eyes.

Normalmente, quando una pagina web viene caricata lo screen reader inizia
automaticamente a leggerla.

Jaws dà anzitutto una informazione sul numero di
frame e di link presenti sulla pagina, quindi legge il titolo della pagina,
prelevandolo dal tag title della sezione head del file Html. Window-Eyes legge invece solo il titolo.

Se scendendo con la freccia giù si incontra una
immagine, lo screen reader dirà “grafico” seguito dalla descrizione
alternativa che appare nell’attributo alt dell’elemento img.

Se l’attributo alt non è presente o è vuoto, viene letto il nome del file contenente l’immagine.

Se l’immagine rappresenta un link, lo screen reader dirà “link grafico” seguito
dal testo descrittivo. In mancanza di tale testo, lo screen reader può
comportarsi in modo diverso: può leggere il nome del file contenente
l’immagine oppure può leggere l’Url ad essa associato, o ancora può leggere
il contenuto del tag title. Lo stesso accade con le mappe immagine.

Jaws e Window-Eyes informano anche sulla presenza di tabelle, indicando il numero
di colonne e di righe.

Le tabelle vengono decolonnizzate, cioè vengono lette
una cella dopo l’altra. Ci sono dei comandi che consentono di muoversi
all’interno delle tabelle, ad esempio spostandosi di cella in cella in senso
verticale.

Se per i titoli viene usato il tag th, lo screen reader è in
grado di identificare la cella corrispondente come titolo e di leggerlo a
richiesta dell’utente.

Lo screen reader legge automaticamente il testo
contenuto nell’attributo summary prima di iniziare la lettura dei dati contenuti
nella tabella.

Ultimamente Jaws e Window-Eyes annunciano anche le intestazioni (tag da h1 a
h6) e consentono di spostarsi rapidamente tra le sezioni identificate dalle
intestazioni.

Nelle pagine web ci si può sempre spostare tra i link con il tasto Tab.
Tuttavia questo non risulta molto agevole se sulla pagina ci sono decine o
centinaia di link. Perciò tutti gli screen reader e i browser vocali prevedono una funzione che
fa apparire sullo schermo l’elenco di tutti i link, che può essere scorso
con le frecce. I link si attiveranno premendo Invio su quello desiderato.

L'elenco di tutti i link della pagina con Ibm Home Page Reader

Per questo motivo è importante che il testo associato ad ogni link sia
significativo e non si limiti a cose del tipo “clicca qui”, che lette al di
fuori del contesto non hanno alcun significato.

Poiché Jaws e Window-Eyes utilizzano i tasti freccia per muoversi
all’interno della pagina web, hanno dovuto introdurre una modalità
particolare per la compilazione dei form. In Jaws tale modalità si chiama
“Modalità Maschere” e si attiva premendo Invio all’interno di un campo
editazione o di un altro elemento del form che non sia un pulsante.

In questa modalità lo screen reader cerca di individuare il testo associato ad
ogni controllo (ad es. il testo che indica cosa bisogna inserire in un
determinato campo editazione). Per fare ciò si basa sul tag
label oppure sull’attributo name dell’elemento input. Se tali elementi non sono
presenti o non sono univoci, lo screen reader può leggere informazioni
sbagliate o non leggere assolutamente nulla. Lo stesso accade se il testo
che indica il dato da immettere è costituito da una immagine.

Jaws e Window-Eyes sono anche in grado di annunciare automaticamente
l’inizio e la fine dei frame, leggendone anche il titolo. Per questo motivo
il titolo dei frame deve essere autoesplicativo e non limitarsi a
cose del tipo “leftframe” o “superiore”.

Per quanto riguarda i tasti di accesso rapido (tag acceskey), Jaws e
Window-Eyes li annunciano automaticamente.

Limiti e peculiarità

Quella delle tecnologie accessibili è una corsa ad inseguimento: la tecnologia corre e gli sviluppatori dei software di sintesi vocale le corrono dietro. Non si fa in tempo a raggiungere un
traguardo che già la tecnologia pone nuove sfide.

E’ stato così per Windows
(solo nel 1995 sono usciti i primi programmi che consentivano di accedere
all’interfaccia grafica in maniera decente), è stato così con la
trasformazione del web da elemento prevalentemente testuale e statico ad
elemento prevalentemente grafico e dinamico. Quando finalmente siamo
riusciti a leggere quasi tutte le pagine web grazie alle nuove funzioni
offerte da Internet Explorer 5 ed all’adozione del cosiddetto cursore Pc
virtuale, è arrivato Flash, assolutamente inaccessibile per il modo in
cui era concepito.

Gli screen reader sono forniti con una serie di file di configurazione che consentono di personalizzare il comportamento del software con i diversi applicativi disponibili. Anche se è presente un editor per aggiungere o personalizzare questi file, è comunque necessario mantenere la versione dello screen reader il più aggiornata possibile.

L'editor di script di Jaws

C’è ancora molta strada da fare per realizzare dei software realmente completi.

Attualmente gli screen reader non sono ad esempio in grado di selezionare
automaticamente la lingua sulla base del tag lang, sebbene questa sia una
delle raccomandazioni contenute nelle “User Agent Accessibility Guidelines”
del W3c.

Solo Home Page Reader di Ibm è in grado di rilevare automaticamente il cambio di lingua, anche se questo ha come conseguenza il cambio di interprete ed introduce una pausa durante la lettura del testo.

Rilevamento automatico è un'opzione possibile con Ibm Home Page Reader

Jaws può anche non ripetere la lettura delle parti di una pagina che rimangono invariate. È una caratteristica molto interessante, soprattutto considerando che è impossibile per uno screen reader offrire all’operatore una panoramica del contenuto nella pagina: non può che iniziare la lettura dall’inizio.

Le opzioni Html di Jaws, tra cui spicca la possibilità di ignorare il contenuto ripetuto su più pagine

Questa opzione non sostituisce comunque la necessità per lo sviluppatore di prevedere un link che salti al contenuto della pagina. Anche se di solito Jaws riesce a
saltare le parti ripetute presenti sulle pagine web, basta che
cambi anche un solo carattere perché rilegga tutta la pagina. Per questo
motivo spesso la cosa non funziona: basti pensare alle pagine nelle quali cambia
solamente il banner pubblicitario posto all’inizio della pagina. Jaws
inizia a leggere dal punto in cui secondo lui il contenuto è diverso
rispetto a quello della pagina precedente.

Inoltre lo screen reader non è in grado di leggere il testo
associato ad eventi scatenati dal mouse, tipicamente l’attributo mouseover.

Attualmente risultano inutilizzabili sia le applicazioni Java presenti nelle
pagine web sia le animazioni Flash contenenti link. Peraltro sia Sun che
Macromedia sono impegnate nello sviluppo di plug-in che consentano agli
screen reader di “vedere” anche queste porzioni del web. Tuttavia è
necessario che gli sviluppatori predispongano le applicazioni Java e le
animazioni Flash seguendo determinati parametri illustrati nelle pagine
relative all’accessibilità di Macromedia e Sun.

La prossima versione di Jaws

È oggi disponibile la versione 4.50 di Jaws in inglese, mentre l’uscita della versione italiana è prevista entro la fine dell’anno.

Questa versione ha alcune novità, in particolare i tasti di navigazione
rapida (ad es. premendo la lettera t si passa alla tabella successiva), una
funzione che consente di ottenere una descrizione dettagliata di ogni
singolo tag Html e della sua posizione nella gerarchia della pagina, e
il supporto per le animazioni Flash.

Proprio Flash può far sì che Jaws riprenda a leggere il testo della pagina, in quanto giustamente
ritiene che il contenuto sia cambiato. Peccato che spesso il contenuto
delle animazioni Flash sia puramente grafico. Comunque nella finestra di
dialogo Regola prolissità di Jaws (Insert+V) è possibile agire sulle
opzioni “Refresh active” e “Refresh page” per evitare la rilettura automatica
della pagina.

In particolare la funzione “Refresh page” risolve un annoso
problema: quello dei siti con refresh automatico a tempo. Spesso il cieco
non fa in tempo ad esplorare la pagina che scatta il meccanismo di refresh
e Jaws ricomincia a leggere la pagina dall’inizio. Ciò accade anche se il
refresh riguarda un frame contenuto nella pagina.