Tecniche di accessibilità web
Le tabelle di dati

WCAG 1.0, linea guida 5
Garantire che le tabelle abbiano la necessaria
marcatura per essere trasformate da browser
accessibili e da altri programmi utente.
 6 punti di controllo
[email protected]
Tabelle e form accessibili
Tecniche di accessibilità web
Le tabelle di dati
5.1
[priorità 1]
Per le tabelle di dati, identificare le intestazioni di riga e
colonna.
Usare il tag <th> per le celle di intestazione
Cella di intestazione: rappresenta la categoria sotto la
quale vengono catalogati gli individui o gli oggetti che
fanno parte della medesima riga o colonna (solitamente
la prima riga dall’alto e la prima colonna da sinistra)
Usare l’elemento <caption> per il titolo della tabella
[email protected]
Tabelle e form accessibili
Tecniche di accessibilità web
Le tabelle di dati
<table>
<caption>Esempio di tabella dati</caption>
<tr>
<td></td>
<th>Intestazione colonna 1</th>
<th>Intestazione colonna 2</th>
</tr>
<tr>
<th>Intestazione riga 1</th>
<td>Col. 1 Riga 1</td>
<td>Col. 1 Riga 2</td>
</tr>
<tr>
<th>Intestazione riga 2</th>
<td>Col. 2 Riga 1</td>
<td>Col. 2 Riga 2</td>
</tr>
</table>
[email protected]
Tabelle e form accessibili
Tecniche di accessibilità web
Le tabelle di dati
5.2
[priorità 1]
Per tabelle di dati che hanno due o più livelli logici di
intestazioni di righe o colonne, usare marcatori per associare
le celle di dati e le celle di intestazione.
Per descrivere relazioni più complesse tra i dati, usare gli
attributi:
– Scope
– Headers e id
– Axis
Utilizzare
gli elementi <thead>, <tbody>, <tfoot> per
strutturare e raggruppare le righe rispettivamente in testa,
corpo e piede della tabella.
[email protected]
Tabelle e form accessibili
Tecniche di accessibilità web
Le tabelle di dati: attributo scope
Indica
lo scopo, l’ambito di raggruppamento di una
cella di intestazione.
Può avere quattro valori:
– Row: se la cella fornisce informazioni d’intestazione per il resto
della riga di cui fa parte;
– Col: se fornisce informazioni d’intestazione per il resto della
colonna
– Rowgroup: per il resto del gruppo di righe di cui fa parte;
– Colgroup: per il resto del gruppo di colonne di cui fa parte.
Scarso
supporto da parte di alcuni screen reader
[email protected]
Tabelle e form accessibili
Tecniche di accessibilità web
Le tabelle di dati: attributi header e id
Usati
in modo combinato per creare associazioni
inequivocabili tra celle di tabelle complesse.
Id: deve avere valore unico all’interno del
documento.
Header: usato per associare una cella ad una
intestazione con particolare id.
Per ottenere un ordine di lettura corretto, è
necessario inserire i valori di headers in una
sequenza significativa.
[email protected]
Tabelle e form accessibili
Tecniche di accessibilità web
Le tabelle di dati: attributo axis
Usato
per creare associazioni tra celle che non
sono in relazione diretta tra loro, cioè che non
hanno un rapporto intestazione/dati, gestibile per
mezzo degli attributi scope, headers, id.
Scarso supporto da parte di browser e screen
reader.
[email protected]
Tabelle e form accessibili
Tecniche di accessibilità web
Le tabelle di dati
Per
strutturare una tabella, è possibile utilizzare
anche i seguenti elementi:
– <caption>: definisce il titolo di una tabella
– <thead>, <tbody>, <tfoot>: definiscono rispettivamente
intestazione, corpo e piede della tabella.
[email protected]
Tabelle e form accessibili
Tecniche di accessibilità web
Le tabelle di dati: esempio
<table summary="Numero di studenti iscritti
suddivisi per
anno scolastico, numero classi, iscritti e
ripetenti">
<caption>
Alunni di una scuola
</caption>
<thead>
<tr>
<th rowspan="2" id="t1">anni di corso</th>
<th rowspan="2" id="t2">n&deg; classi</th>
<th colspan="3" id="t3">alunni iscritti</th>
<th colspan="3" id="t4">alunni ripetenti</th>
</tr>
<tr>
<td id="a4" headers="t3" class="int">M</td>
<td id="a5" headers="t3" class="int">F</td>
<td id="a6" headers="t3" class="int">totale</td>
<td id="a7" headers="t4" class="int">M</td>
<td id="a8" headers="t4" class="int">F</td>
<td id="a9" headers="t4" class="int">totale</td>
</tr>
</thead>
[continua]
[email protected]
<tbody>
<tr>
<td class="int">1&deg; anno</td>
<td headers="t2" axis=”quantità”>4</td>
<td headers="t3 a4" axis=”quantità”>4</td>
<td headers="t3 a5" axis=”quantità”>0</td>
<td headers="t3 a6" axis=”quantità”>4</td>
<td headers="t4 a7" axis=”quantità”>5</td>
<td headers="t4 a8" axis=”quantità”>0</td>
<td headers="t4 a9" axis=”quantità”>5</td>
</tr>
<tr>
<td class="int">2&deg; anno</td>
<td headers="t2" axis=”quantità”>5</td>
<td headers="t3 a4" axis=”quantità”>0</td>
<td headers="t3 a5" axis=”quantità”>0</td>
<td headers="t3 a6" axis=”quantità”>0</td>
<td headers="t4 a7" axis=”quantità”>5</td>
<td headers="t4 a8" axis=”quantità”>0</td>
<td headers="t4 a9" axis=”quantità”>5</td>
</tr>
</tbody>
</table>
Tabelle e form accessibili
Tecniche di accessibilità web
Le tabelle di dati: esempio
[email protected]
Tabelle e form accessibili
Tecniche di accessibilità web
Le tabelle di dati
5.3
[priorità 2]
Non usare le tabelle a scopo d’impaginazione, a
meno che non abbiano senso quando linearizzate.
Altrimenti, se la tabella non ha senso, fornire
un’alternativa equivalente (che può essere una
versione linearizzata).
È necessario che la lettura dei contenuti (che
avviene riga per riga, da sinistra a destra, dall’alto
verso il basso) abbia un senso.
[email protected]
Tabelle e form accessibili
Tecniche di accessibilità web
Le tabelle di dati


5.4 [priorità 2]
Se una tabella è usata a scopo
d’impaginazione, non usare alcuna
marcatura strutturale per ottenere effetti di
formattazione visuale.
Non usare <th>, <tbody>, ecc..
[email protected]
Tabelle e form accessibili
Tecniche di accessibilità web
Le tabelle di dati



5.5 [priorità 3]
Fornire sommari per le tabelle
Usare l’attributo “summary” per fornire
informazioni preventive sui contenuti e sulla
loro organizzazione all’interno della tabella.
Particolarmente utile per screen reader.
[email protected]
Tabelle e form accessibili
Tecniche di accessibilità web
Le tabelle di dati



5.6 [priorità 3]
Fornire abbreviazioni per le etichette delle
celle d’intestazione
Usare l’attributo “abbr” per th e td, in
maniera da ridurre i tempi di lettura in caso
di contenuti molto lunghi.
In realtà, si cerca di rendere sintetici ma
significativi i contenuti delle celle.
[email protected]
Tabelle e form accessibili
Tecniche di accessibilità web
I moduli (form)

Punto di controllo 10.2 [priorità 2]
Fino a quando gli interpreti non supporteranno
esplicite associazioni fra etichette e controlli
dei moduli, assicurare, per tutti i controlli dei
moduli che hanno etichette associate
implicitamente, che l'etichetta sia posizionata
correttamente.
[email protected]
Tabelle e form accessibili
Tecniche di accessibilità web
I moduli (form)

Punto di controllo 12.4 [priorità 2]
Associare esplicitamente le etichette ai loro
controlli.
[email protected]
Tabelle e form accessibili
Tecniche di accessibilità web
I moduli (form)
L'etichetta
deve precedere il proprio controllo
immediatamente sulla stessa riga (permettendo più di
un controllo/etichetta per riga) oppure essere nella riga
precedente il controllo (con una sola etichetta e un solo
controllo per riga).
 L’etichetta permette di ottenere informazioni chiare
su quali dati sono richiesti e contemporaneamente
consente con maggior facilità il posizionamento da
parte di utenti con disabilità motorie.
 L’etichetta testuale deve essere marcata con
l’elemento <label>
[email protected]
Tabelle e form accessibili
Tecniche di accessibilità web
I moduli (form)
Es.1
– campo di testo
<label for=“user">Username:</label>
<input type="text“ value=“Username" id=“user" />
Es.
2 – radiobutton (e checkbox)
<input type=“radio“ value=“Sì" id=“si” checked="checked" />
<label for=“si">Sì</label>
<input type=“radio“ value=“No" id=“no” />
<label for=“no">No</label>
[email protected]
Tabelle e form accessibili
Tecniche di accessibilità web
I moduli (form)

Es.3 – select
<label for=“mese”>Mese</label>
<select id=“mese”>
<option value=“Gennaio” selected=“selected”>Gennaio</option>
<option value=“Febbraio”>Febbraio</option>
</select>

Es. 4 – textarea
<label for=“commenti”>Commenti</label>
<textarea id=“commenti” >Inserire qui i commenti</textarea>
[email protected]
Tabelle e form accessibili
Tecniche di accessibilità web
I moduli (form)
L'attributo
"for" permette di associare un elemento
<label> in modo esplicito ad un determinato elemento
interno al modulo.
 Il valore dell'attributo "for" dell'elemento <label>
deve corrispondere al valore dell'attributo "id"
dell'elemento interno al modulo.
 In questo modo la tecnologia assistiva associa
l’etichetta ad un unico campo del modulo.
[email protected]
Tabelle e form accessibili
Tecniche di accessibilità web
I moduli (form)

Punto di controllo 9.4 [priorità 3]
Creare un ordine logico di tabulazione fra i
collegamenti, i controlli dei moduli, e gli oggetti.
[email protected]
Tabelle e form accessibili
Tecniche di accessibilità web
I moduli (form)
L'ordine
di tabulazione descrive un ordine logico per la
navigazione da un link all'altro o da un form all'altro (di
solito usando il tasto "tab").
Si può anche specificare un ordine di tabbing fra gli
elementi con l’attributo tabindex.
[email protected]
Tabelle e form accessibili
Tecniche di accessibilità web
I moduli (form)
Esempio
<form action="submit" method="post">
<label for=“user”>Username</label>
<input tabindex="1" type="text" id=“user“ />
<label for=“pwd”>Password</label>
<input tabindex="2" type="text" id=“pwd“ />
<input tabindex="3" type="submit" id="submit“ />
</form>
[email protected]
Tabelle e form accessibili
Tecniche di accessibilità web
I moduli (form)

Punto di controllo 9.5 [priorità 3]
Fornire scorciatoie da tastiera per i collegamenti
importanti (compresi quelli nelle immagini sensibili
sul lato client), per i controlli dei moduli, e per i
gruppi di controlli dei moduli.
[email protected]
Tabelle e form accessibili
Tecniche di accessibilità web
I moduli (form)




Utilizzare scorciatoie da tastiera attraverso l'attributo
"accesskey".
L'accesso da tastiera ad elementi attivi di una pagina
è importante per utenti che non possono usare un
dispositivo di puntamento.
Gli user agents possono includere caratteristiche che
permettano agli utenti di associare ad un tasto o a
una combinazione di tasti, una determinata azione.
Utile per form usate spesso (login, mail, ecc..)
[email protected]
Tabelle e form accessibili
Tecniche di accessibilità web
I moduli (form)
Esempio
<form action="submit" method="post">
<label for=“user” accesskey=“8”>Username</label>
<input tabindex="1" type="text" id=“user“ />
<label for=“pwd”>Password</label>
<input tabindex="2" type="text" id=“pwd“ />
<input tabindex="3" type="submit" id="submit“ />
</form>
[email protected]
Tabelle e form accessibili