PROGRAMMIAMO
HTML - Tabelle e accessibilità
Dati in forma tabellare

Le tabelle possono presentare numerosi problemi di interpretazione per gli utenti con deficit visivi. Anzitutto è bene evitare di utilizzare le tabelle per creare il layout di una pagina (tabelle nascoste): per questo scopo il posizionamento con gli stili offre senz'altro lo strumento migliore. Le tabelle dunque dovrebbero essere usate solo quando c'è la necessità di presentare un certo contenuto in forma tabellare. Si consideri l'esempio seguente:

<table width="50%" border="1">
<tr>
<td>COLORE</td><td>NOME</td><td>CODICE</td>
</tr>
<tr>
<td>BIANCO</td><td>WHITE</td><td>#FFFFFF</td>
</tr>
<tr>
<td>NERO</td><td>BLACK</td><td>#000000</td>
</tr>
<tr>
<td>BLU</td><td>BLUE</td><td>#0000FF</td>
</tr>
</table>

che produce la seguente visualizzazione:

COLORENOMECODICE
BIANCOWHITE#FFFFFF
NEROBLACK#000000
BLUBLUE#0000FF

In questo esempio la tabella serve per visualizzare rapidamente i colori in HTML e i rispettivi codici.

 

L'elemento caption

L'elemento caption (elemento contenitore che deve sempre comparire per primo, subito dopo l'apertura del tag table) fornisce una didascalia alla tabella che viene visualizzata sopra la tabella stessa. Tale didascalia può essere utile sia per gli utenti con vista normale che per gli utenti con deficit visivi in quanto chiarisce ed esplica il contenuto della tabella stessa. Si consideri l'esempio seguente:

<table width="50%" border="1">
<caption>Colori in HTML con relativi nomi e codici</caption>
<tr>
<td>COLORE</td><td>NOME</td><td>CODICE</td>
</tr>
<tr>
<td>BIANCO</td><td>WHITE</td><td>#FFFFFF</td>
</tr>
<tr>
<td>NERO</td><td>BLACK</td><td>#000000</td>
</tr>
<tr>
<td>BLU</td><td>BLUE</td><td>#0000FF</td>
</tr>
</table>

che viene visualizzato così:

Colori in HTML con relativi nomi e codici
COLORENOMECODICE
BIANCOWHITE#FFFFFF
NEROBLACK#000000
BLUBLUE#0000FF

Per default la didascalia viene visualizzata sopra la tabella, ma è possibile modificarne il posizionamento con lo stile caption-side: bottom come nell'esempio seguente:

<table width="50%" border="1">
<caption style="caption-side: bottom">Colori in HTML con relativi nomi e codici</caption>
<tr>
<td>COLORE</td><td>NOME</td><td>CODICE</td>
</tr>
<tr>
<td>BIANCO</td><td>WHITE</td><td>#FFFFFF</td>
</tr>
<tr>
<td>NERO</td><td>BLACK</td><td>#000000</td>
</tr>
<tr>
<td>BLU</td><td>BLUE</td><td>#0000FF</td>
</tr>
</table>

che viene visualizzato così:

Colori in HTML con relativi nomi e codici
COLORENOMECODICE
BIANCOWHITE#FFFFFF
NEROBLACK#000000
BLUBLUE#0000FF

 

TH, scope e abbr

Una delle principali difficoltà nell'interpretare una tabella per chi non può vedere consiste nell'identificare correttamente a quale riga e a quale colonna appartiene una data cella. Consideriamo di nuovo la tabella del nostro semplice esempio:

Colori in HTML con relativi nomi e codici
COLORENOMECODICE
BIANCOWHITE#FFFFFF
NEROBLACK#000000
BLUBLUE#0000FF

Qui per esempio l'ultima cella in basso a destra contiene il valore #0000FF. Tale valore rappresenta il codice esadecimale del colore blu. Queste ultime informazioni sono desunte dal fatto che la cella si trova nella colonna con intestazione CODICE e nella riga con intestazione BLU. Tuttavia un utente con deficit visivo o che usa browser vocali può incontrare grosse difficoltà nell'attribuire una cella a una data colonna e a una data riga: di conseguenza il contenuto della cella stessa potrebbe risultare di difficile interpretazione.

Allo scopo di migliorare l'accessibilità di una tabella, è stato introdotto l'elemento th. Questo elemento serve per identificare una data cella come intestazione di riga o di colonna. Si consideri l'esempio seguente, sempre riferito alla solita tabella dei colori:

<table width="50%" border="1">
<caption style="caption-side: bottom">Colori in HTML con relativi nomi e codici</caption>
<tr>
<th scope="col">COLORE</th><th scope="col">NOME</th><th scope="col">CODICE</th>
</tr>
<tr>
<th scope="row">BIANCO</th><td>WHITE</td><td>#FFFFFF</td>
</tr>
<tr>
<th scope="row">NERO</th><td>BLACK</td><td>#000000</td>
</tr>
<tr>
<th scope="row">BLU</th><td>BLUE</td><td>#0000FF</td>
</tr>
</table>

che viene visualizzato così:

Colori in HTML con relativi nomi e codici
COLORENOMECODICE
BIANCOWHITE#FFFFFF
NEROBLACK#000000
BLUBLUE#0000FF

Osserviamo anzitutto che l'elemento th deve essere usato al posto del normale elemento td. Esso sta a indicare che una data cella contiene l'intestazione di una colonna (scope="col") o di una riga (scope="row"). Questa informazione può essere utilizzata da uno screen reader per essere letta insieme al contenuto di una data cella. Per esempio, leggendo il codice #0000FF uno screen reader potrebbe anche leggere CODICE e BLU, identificando così in modo corretto il significato della cella stessa.

Osserviamo che, normalmente, nei browser visivi th viene visualizzato in grassetto. Tale formattazione può tuttavia essere facilmente modificata con gli stili.

Se l'intestazione th è lunga, ciò può risultare noioso per chi dispone di uno screen reader che la rilegge ripetendola più volte. A questo scopo l'attributo abbr consente di fornire una abbreviazione, come mostra il seguente esempio:

<table summary="Il numero di dipendenti e l'anno di fondazione di alcune compagnie immaginarie.">
<caption>Dati compagnia</caption>
  <tr>
    <th scope="col" abbr="Compagnia">Nome della Compagnia</th>
    <th scope="col" abbr="Impiegati">Numero di Impiegati</th>
    <th scope="col" abbr="Fondazione">Anno di fondazione</th>
  </tr>
  <tr>
    <td scope="row">ACME Inc</td>
    <td>1000</td>
    <td>1947</td>
  </tr>
  <tr>
    <td scope="row">XYZ Corp</td>
    <td>2000</td>
    <td>1973</td>
  </tr>
</table>

 

 

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it