ti trovi in: Home Page - Biblioteca - Manualistica - L'accessibilità dei siti web - Accessibilità dei contenuti -

Linea guida 5 - Le tabelle

Definizione

La quinta linea guida da rispettare per garantire l'accessibilità dei contenuti dei siti Web afferma:

"Assicurarsi che le tabelle siano strutturate correttamente"

Ai fini dell'accessibilità, le tabelle restano per certi aspetti elementi abbastanza critici. Il punto cruciale del problema è nell'uso che si fa delle tabelle.

Esse dovrebbero essere utilizzate esclusivamente per mostrare informazioni realmente tabellari, cioè come "tabelle di dati".

Invece, non dovrebbero essere usate, come spesso avviene, per l'impaginazione dei documenti, cioè come "tabelle di impaginazione".

E' necessario utilizzare i marcatori correttamente, solo così tutti gli utenti potranno accedere e interagire con le tabelle senza perdere o distorcere le informazioni.

In questo modo, si favoriscono sia coloro che accedono alle tabelle con ausili audio, come un lettore di schermo o un PC installato in auto, o con sistemi a display piccoli, come i cellulari; sia coloro che possono vedere solo una parte per volta della tabella, come le persone con problemi alla vista.

Priorità 1 - Identificare righe e colonne

Per rappresentare dei dati in forma tabellare, si deve usare il tag TABLE e i suoi attributi: TR, TD, TH e CAPTION.

L'alternativa a questo comando, per esempio il tag PRE per testi preformattati, renderebbe la comprensione delle tabelle più difficile per gli utenti che usano le tecnologie assistive.

Ecco un esempio di tabella correttamente strutturata.

Codice della tabella:

<TABLE>
   <TR>
      <TD> </TD>
      <TH>Colonna 1</TH>
      <TH>Colonna 2</TH>
   </TR>
   <TR>
      <TH>Riga 1</TH>
      <TD>C1R1</TD>
      <TD>C1R2</TD>
   </TR>
   <TR>
      <TH>Riga 2</TH>
      <TD>C2R1</TD>
      <TD>C2R2</TD>
   </TR>
</TABLE>

Bisogna ricordarsi, inoltre, che quando si usa una tabella per determinare il layout della pagina, non si devono assolutamente usare i markup riservati ai dati delle tabelle come TH, HEADER, SCOPE, COLGROUP. Infatti, questi elementi saranno usati da alcuni interpreti per identificare e manipolare dei dati, che poi effettivamente non ci sono.

L'HTML 4.0, inoltre, permette di legare esplicitamente all'intestazione della colonna il valore contenuto nella riga corrispondente, usando l'attributo HEADERS degli elementi TD e TH.

In questo modo, ogni dato è associato esplicitamente con la appropriata intestazione.

Si veda l'esempio successivo per maggiori chiarimenti.

Quando si usa l'attributo HEADERS, il browser o lo screen reader saranno capaci di esporre o leggere i contenuti delle celle della tabella (se l'utente lo vuole) in questa maniera:

Nome: P. Bianchi, Tazze: 10, Tipo: Espresso, Zucchero: No
Nome: M. Rossi, Tazze: 5, Tipo: Decaffeinato, Zucchero: Si

associando ogni dato alla sua intestazione.

Codice della tabella

<TABLE>
   <TR>
      <TH id="t1">Nome</TH>
      <TH id="t2">Tazze</TH>
      <TH id="t3" abbr="Type">Tipo di caff&egrave;</TH>
      <TH id="t4">Zucchero? </TH>
   </TR>
   <TR>
      <TD headers="t1">P. Bianchi</TD>
      <TD headers="t2">10</TD>
      <TD headers="t3">Espresso</TD>
      <TD headers="t4">No</TD>
   </TR>
   <TR>
      <TD headers="t1">M. Rossi</TD>
      <TD headers="t2">5</TD>
      <TD headers="t3">Decaffeinato</TD>
      <TD headers="t4">Si</TD>
   </TR>
</TABLE>

Priorità 2 - Impaginare con le tabelle

Usare le tabelle in modo corretto significa non utilizzarle per impaginare. Nello specifico:

• non bisogna usare le tabelle per le impaginazioni, a meno che non sia possibile una loro lettura in modo linearizzato e sequenziale. Se non è realizzabile una lettura di tal genere bisogna fornire una descrizione testuale equivalente della tabella;
• non bisogna usare i marcatori di struttura per la formattazione della resa visiva, nelle tabelle utilizzate per l'impaginazione. Il tag TH, per esempio, non deve essere inserito per rendere grassetto il contenuto di una cella, che non è un'intestazione.

Quindi la riga giusta di comando è la seguente:

<TD> <DIV style="font-weight: bold">testo in grassetto</DIV></TD>

e non:

<TH>Dammi un testo in grassetto</TH>

Priorità 3 - Sommari e abbreviazioni

Sarebbe, inoltre, opportuno inserire durante la realizzazione delle tabelle:

• sommari che spiegano il significato della tabella, inserendo l'attributo SUMMARY del tag TABLE. Attraverso l'utilizzo di questo attributo, il browser e lo screen reader possono leggere all'utente il riassunto del contenuto della tabella;
• abbreviazioni per le etichette di intestazione, in modo da semplificare l'informazione che deve essere letta o riprodotta, usando l'attributo ABBR del tag TH.