Vai ai contenuti

LAU



Home > testare > accessibilità: test con gli user agent > Screen Reader e tabelle accessibili


Screen Reader e tabelle accessibili

Consultare una pagina web mediante browser non visuali e tecnologie assistive richiede una maggiore attenzione nella gestione degli elementi del linguaggio XHTML in modo tale da facilitare la percezione dei contenuti tramite altri canali sensoriali. Di seguito vengono riportati degli esempi di come le tabelle vengono interpretate da tre screen reader fra i più diffusi.

a cura di: Yvonne Carpegna e Riccardo Franco | 15 giugno 2005


Le tabelle di dati servono per visualizzare informazioni di carattere tabellare in cui vengono definite specifiche e chiare relazioni orizzontali e verticali tra i contenuti delle celle stesse. Ogni tabella contiene pertanto delle celle dedicate alle intestazioni, che consentono di qualificare ed identificare i dati, e delle celle contenenti i dati veri e propri. Le tabelle, inoltre, possono essere definite semplici o complesse a seconda che abbiano un solo livello di intestazione o più di uno.

La percezione visiva permette una rapida scansione di una tabella in modo tale da ottenere facilmente una visione d'insieme della struttura e dei dati in essa contenuti. Inoltre gli accorgimenti visuali abitualmente adottati per la visualizzazione di una tabella (allineamenti, linee di separazione tra colonne, diversi colori di sfondo per righe adiacenti) ne facilitano la comprensione. Nel momento in cui la tabella deve essere compresa e percepita mediante un altro canale sensoriale (audio nel caso in cui essa venga letta, o Braille nel caso in cui venga scandita da opportuni reader), l'informazione diventa seriale e viene linearizzata in una lettura sequenziale degli elementi che la compongono. Capire velocemente quale tipo di informazione viene fornita e come le celle della tabella siano correlate fra di loro può diventare un'operazione onerosa per l'utente al quale viene richiesto uno sforzo ulteriore volto a memorizzare una gran quantità di informazioni prima di avere un quadro completo della tabella stessa.

La progettazione di una tabella di dati accessibile richiede una particolare attenzione nell'uso di una serie di meta-informazioni che consentono di capire ed interpretare al meglio il contenuto e la struttura della tabella stessa. L'utilizzo di attributi quali: scope e la coppia id ed headers, consente di identificare le celle d'intestazione e le relazioni che sussistono tra queste e le celle permettendo una consultazione più agevole dei dati.
Inoltre, il tag caption permette di associare una didascalia alla tabella mentre l'attributo summary, non visualizzato su web browser standard, fornisce un testo leggibile da user agent basati su tecnologie TTS, indicando una descrizione dei contenuti, della struttura e delle finalità della tabella stessa.
Ovviamente la reale efficacia derivata dall'utilizzo di queste meta-informazioni dipende fortemente da come queste vengono supportate dai vari sintetizzatori vocali. In particolare, in questo articolo sono stati considerati tre screen reader tra i più diffusi: Jaws di Freedom Scientific, Home Page Reader di IBM e Window Eyes di GW Micro.

Di seguito sono indicati i principali comandi supportati dagli screen reader per gestire la lettura e la navigazione delle tabelle.

Jaws

Per il controllo della lettura vocale di una tabella necessario utlizzare la combinazione dei tasti CTRL+ALT+ tasti direzionali per muoversi tra le celle e CTRL+ALT+Numpad5 per ottenere le informazioni relative alla cella corrente. In particolare Jaws legge in ordine: l'attributo summary, la didascalia rappresentata dal tag CAPTION ed infine il resto della tabella in funzione di come questa è stata realizzata.

Home Page Reader

Per accedere alla modalità che favorisce la lettura di una tabella, è necessario premere in sequenza due combinazioni di tasti ALT+I e successivamente ALT+T; oppure accedere al menu Leggi e selezionare la voce Tabella.

Window-Eyes

Lo screen reader in esame attiva la modalità di lettura tabella con la combinazione di tasti Ctrl e + ; per navigare fra le celle è necessario invece usare Ins+frecce direzionali.

torna su

Dopo aver illustrato i principi da rispettare e le regole da seguire per la realizzazione di tabelle accessibili, di seguito vengono proposti alcuni esempi significativi valutando di volta in volta il comportamento dei tre screen reader analizzati.

Esempio 1: tabella con header in alto ed uso dell'attributo scope

Libri della Biblioteca
Titolo Autore Editore Data Edizione Prezzo
Il mastino di Baskerville Conan Doyle Fabbri Editore 2002 13 €
Così è (se vi pare) Luigi Pirandello Mondadori 1991 10 €
Aut-Aut Soren Kierkegaard Mondadori 2000 15 €
<table  summary="Nella Tabella viene 
fornito un elenco dei libri che
compongono la biblioteca. Ogni riga
descrive un libro tramite l'indicazione
di titolo, autore, editore, data
edizione e prezzo">
<caption>Libri della Biblioteca</caption>
<tr>
<th scope="col">Titolo</th>
<th scope="col">Autore</th>
<th scope="col">Editore</th>
<th scope="col">Data Edizione</th>
<th scope="col">Prezzo</th>
</tr>
<tr>
<td scope="row">Il mastino
di Baskerville</td>
<td lang="en">Conan Doyle</td>
<td>Fabbri Editore</td>
<td>2002</td>
<td>13 €</td>
</tr>
<tr>
<td scope="row">Cos&igrave; &egrave;
(se vi pare)</td>
<td>Luigi Pirandello</td>
<td>Mondadori</td>
<td>1991</td>
<td>10 €</td>
</tr>
<tr>
<td scope="row">Aut-Aut</td>
<td>Soren Kierkegaard</td>
<td>Mondadori</td>
<td>2000</td>
<td>15 €</td>
</tr>
</table>

In questo esempio si può notare come viene utilizzato l'attributo summary per fornire un riassunto dello scopo e della struttura della tabella per programmi utente la cui riproduzione è diretta a media non visuali. Il tag caption, presente immediatamente dopo il marcatore table, serve come didascalia alla tabella stessa e, al contrario del precedente, è volto soprattutto ad utenti vedenti in quanto viene visualizzato sulla pagina. Nell'esempio emerge inoltre come viene gestito l'attributo scope per specificare l'insieme di celle di dati per cui è valida la cella d'intestazione th o la colonna td. La lettura tramite jaws 6 e hpr 3 avviene in modo corretto ed in particolare spostandosi in verticale fra le celle di contenuto vengono lette le informazioni associate alle celle di intestazione che hanno scope row mentre nel caso di spostamenti orizzontali vengono lette quelle relativa alle celle con scope col. A differenza dei precedenti, Window Eyes non supporta l'attributo scope.

torna su

Esempio 2: uso della coppia id e headers + attributo axis

Lunedi Martedi Mercoledi Giovedi Venerdi
Italiano
8.00 1s     3d  
9.00   2f     1a
Geografia
8.00   4c 6d    
9.00 2f     1a  
<table border="1">
<tr>
<th></th>
<th id="c1" abbr="Lun" axis="giorno">
Lunedi</th>
<th id="c2" abbr="Mar" axis="giorno">
Martedi</th>
<th id="c3" abbr="Mer" axis="giorno">
Mercoledi</th>
<th id="c4" abbr="Gio" axis="giorno">
Giovedi</th>
<th id="c5" abbr="Ven" axis="giorno">
Venerdi</th>
</tr>
<tr>
<th id="m1" axis="materia">
Italiano</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td id="o1" axis="ora">8.00</td>
<td headers="m1 c1 o1">1s</td>
<td headers="m1 c2 o1">&nbsp;</td>
<td headers="m1 c3 o1">&nbsp;</td>
<td headers="m1 c4 o1">3d</td>
<td headers="m1 c5 o1">&nbsp;</td>
</tr>
<tr>
<td id="o2" axis="ora">9.00</td>
<td headers="m1 c1 o2">&nbsp;</td>
<td headers="m1 c2 o2">2f</td>
<td headers="m1 c3 o2">&nbsp;</td>
<td headers="m1 c4 o2">&nbsp;</td>
<td headers="m1 c5 o2">1a</td>
</tr>
<tr>
<th id="m2" axis="materia">
Geografia</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td id="o3" axis="ora">8.00</td>
<td headers="m2 c1 o1">&nbsp;</td>
<td headers="m2 c2 o1">4c</td>
<td headers="m2 c3 o1">6d</td>
<td headers="m2 c4 o1">&nbsp;</td>
<td headers="m2 c5 o1">&nbsp;</td>
</tr>
<tr>
<td id="o4" axis="ora">9.00</td>
<td headers="m2 c1 o2">2f</td>
<td headers="m2 c2 o2">&nbsp;</td>
<td headers="m2 c3 o2">&nbsp;</td>
<td headers="m2 c4 o2">1a</td>
<td headers="m2 c5 o2">&nbsp;</td>
</tr>
</table>

Oltre ad aver fornito le meta-informazioni descritte nell'esempio precedente tramite l'utilizzo dell'attributo summary e del tag caption, si è scelto in questo caso di sfruttare l'attributo axis contemporaneamente con la coppia id ed headers per associare ad una cella una categoria concettuale. In altre parole, mentre l'attributo axis identifica le possibili categorie, i tag id ed headers hanno lo scopo di definire le relazioni che intercorrono fra celle di intestazione e celle di contenuto. Di fatto, in questo caso è stata realizzata una struttura tabellare a tre dimensioni: giorno, materia ed ora, in cui le aule rappresentano il dato identificato dalla combinazione delle tre dimensioni.
Gli user agent in grado di supportare tale funzionalità, consentono agli utenti di navigare la tabella ottenendo le meta-informazioni necessarie ad identificare la posizione corrente. La funzionalità è correttamente supportata dallo Screen Reader Jaws versione 6 mentre HPR 3 e Window Eyes 5 ignorano l'attributo axis. Inoltre da quest'ultimo strumento, a differenza dei precedenti, vengono letti per ogni cella di contenuto la cella di intestazione (o la sua abbreviazione) di tutti gli elementi che compaiono nell'attributo headers (nell'ordine in cui sono indicati), indipendentemente dallo spostamento dell'utente in verticale o in orizzontale, e successivamento il dato vero e proprio.

torna su

Esempio 3: uso degli attributi ID e HEADERS + rowspan
Orario settimanale delle lezioni
    Lunedi Martedi Mercoledi Giovedi Venerdi
Italiano 8.00 1s     3d  
9.00   2f     1a
Geografia 8.00   4c 6d    
9.00 2f     1a  
<table border="1" summary="La tabella 
fornisce le materie di insegnamento e
le aule di lezione in funzione dei
giorni della settimana e dell'orario">
<caption>Orario settimanale delle lezioni
</caption>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
<th id="c1" abbr="Lu" axis="giorno">
Lunedi</th>
<th id="c2" abbr="Ma" axis="giorno">
Martedi</th>
<th id="c3" abbr="Me" axis="giorno">
Mercoledi</th>
<th id="c4" abbr="Gio" axis="giorno">
Giovedi</th>
<th id="c5" abbr="Ve" axis="giorno">
Venerdi</th>
</tr>
<tr>
<th rowspan="2" id="m1" axis="materia">
Italiano</th>
<td id="o1" axis="ora">8.00</td>
<td headers="m1 c1 o1">1s</td>
<td headers="m1 c2 o1">&nbsp;</td>
<td headers="m1 c3 o1">&nbsp;</td>
<td headers="m1 c4 o1">3d</td>
<td headers="m1 c5 o1">&nbsp;</td>
</tr>
<tr>
<td id="o2" axis="ora">9.00</td>
<td headers="m1 c1 o2">&nbsp;</td>
<td headers="m1 c2 o2">2f</td>
<td headers="m1 c3 o2">&nbsp;</td>
<td headers="m1 c4 o2">&nbsp;</td>
<td headers="m1 c5 o2">1a</td>
</tr>
<tr>
<th rowspan="2" id="m2" axis="materia">
Geografia</th>
<td id="o3" axis="ora">8.00</td>
<td headers="m2 c1 o1">&nbsp;</td>
<td headers="m2 c2 o1">4c</td>
<td headers="m2 c3 o1">6d</td>
<td headers="m2 c4 o1">&nbsp;</td>
<td headers="m2 c5 o1">&nbsp;</td>
</tr>
<tr>
<td id="o4" axis="ora">9.00</td>
<td headers="m2 c1 o2">2f</td>
<td headers="m2 c2 o2">&nbsp;</td>
<td headers="m2 c3 o2">&nbsp;</td>
<td headers="m2 c4 o2">1a</td>
<td headers="m2 c5 o2">&nbsp;</td>
</tr>
</table>

In questo esempio è stata riorganizzata la tabella in modo tale da migliorare la sua presentazione su browser visuali. L'utilizzo degli attributi id ed headers consente di mantenere inalterata la lettura effettuata dagli screen reader anche in presenza di attributi come rowspan e colspan volti a raggruppare visivamente le intestazioni.

torna su

Esempio 4: uso dell'attributo SCOPE + rowspan + colspan
    Giorni della settimana
    Lunedi Martedi Mercoledi Giovedi Venerdi
Italiano 8.00 1s     3d  
9.00   2f     1a
Geografia 8.00   4c 6d    
9.00 2f     1a  
<table border="1">
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
<th scope="colgroup" colspan="5">
Giorni della settimana</th>
</tr>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
<th scope="col" abbr="Lu">Lunedi</th>
<th scope="col" abbr="Ma">Martedi</th>
<th scope="col" abbr="Me">Mercoledi</th>
<th scope="col" abbr="Gio">Giovedi</th>
<th scope="col" abbr="Ve">Venerdi</th>
</tr>
<tr>
<th rowspan="2" scope="rowgroup">
Italiano</th>
<th scope="row" >8.00</th>
<td>1s</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>3d</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row" >9.00</th>
<td>&nbsp;</td>
<td>2f</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>1a</td>
</tr>
<tr>
<th rowspan="2" scope="rowgroup">
Geografia</th>
<th scope="row" >8.00</th>
<td>&nbsp;</td>
<td>4c</td>
<td>6d</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row" >9.00</th>
<td>2f</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>1a</td>
<td>&nbsp;</td>
</tr>
</table>

Nell'esempio precedente la relazione tra celle d'intestazione e celle di dato è resa esplicita per mezzo dell'attributo scope. La parola "scope" significa in inglese "estensione, raggio": quest'attributo indica quindi qual è l'estensione di celle per cui valgono come informazioni d'intestazione quelle contenute nella cella marcata con l'attributo "scope". Per agevolare la lettura viene inoltre utilizzato un nuovo attributo, abbr, che ha lo scopo di fornire una forma abbreviata del contenuto di una cella.
L'attributo scope viene supportato in modo differente dai vari tipi di browser vocali che sono stati utilizzati per la scrittura di questo articolo.

torna su

JAWS 6

In particolare, Jaws 6, nei movimenti in verticale, legge le meta-informazioni relative alle righe o gruppi di righe (contenuto del th o td con scope="row/rowgrup" o eventuale suo abbr e axis); nei movimenti in orizzontale, vengono lette le meta-informazioni relative alle colonne o gruppi di colonne (contenuto del th o td con scope="col/colgrup" o eventuale suo abbr e axis).
Nel caso in cui vi siano più livelli di intestazione (uso di attributi colspan e rowspan), come nell'esempio riportato precedentemente, l'intestazione relativa all'attributo scope con valore colgroup viene letta solo in assenza di attributo abbr mentre l'intestazione associata all'attributo scope con valore rowgroup viene letta nel momento in cui l'utente si sposta in verticale e raggiunge la riga dove è stato definito.
Considerando l'ordine di lettura degli elementi, se viene esplicitato l'attributo axis su una cella di intestazione, il suo contenuto viene letto ancora prima della cella di intestazione (o della sua abbreviazione) e del contenuto della cella di dato. All'utente non viene segnalata in alcun modo la mancanza di contenuto in una cella di dato.

HPR 3

HPR si comporta come Jaws per quanto riguarda gli attributi scope, la coppia id ed headers e abbr mentre non gestisce l'attributo axis.
L'attributo scope, quando assume i valori rowgroup oppure colgroup, viene ignorato. Di default, viene letto prima il contenuto della cella e poi il contenuto dell'intestazione o dell'abbreviazione associata.
Questo sintetizzatore vocale, inoltre, nel caso in cui stia leggendo una casella priva di contenuto, avverte l'utente con il messaggio "vuoto".

Window-Eyes 5

Non viene supportato l'attributo scope, mentre la coppia headers/id è supportata correttamente: a differenza dei precedenti, vengono letti per ogni cella di contenuto la cella di intestazione (o la sua abbreviazione) di tutti gli elementi che compaiono nell'attributo headers (nell'ordine in cui sono indicati) e in seguito il contenuto della cella. L'attributo axis non è supportato.

torna su


[ Torna all’inizio della pagina ]



Sito realizzato dal Laboratorio di Accessibilità e Usabilità del CSI-Piemonte - Privacy, cookies e accessibilità

[ Torna all’inizio della pagina ]