Ai disabili della vista che leggono la tabella con la sintesi vocale in un ordine essenzialmente sequenziale o che possono esplorare le celle della tabella muovendosi nelle varie direzioni, occorre fornire alcuni dettagli “descrittivi” che consentano di comprendere la struttura della tabella, associando correttamente i dati variabili alle relative intestazioni.

• Quando possibile semplificare la struttura delle tabelle. Piuttosto che una tabella con più righe o colonne di intestazione e celle unite, è meglio suddividere i dati in più tabelle semplici con una riga e/o colonna di intestazione.
• per le celle che contengono intestazioni fisse, si deve usare il costrutto <TH></TH>, mentre per le celle di dati “variabili” si deve utilizzare il costrutto <TD></TD>; il browser assegna gli attributi di testo evidenziato e centrato alle celle TH, ma è possibile modificarne l’aspetto con gli attributi di stile.
• Per associare le intestazioni alle celle nelle tabelle complesse si deve attribuire a ogni cella di intestazione un ID=”testataX”; le celle di dati si associano alle diverse intestazioni con HEADERS=”testata1 [testata2 [testata3 …]]” (vedere esempi);
• Una semplice associazione prevista dall’HTML 4.0 tra l’intestazione e le celle di dati è l’attributo SCOPE=”gruppo” da inserire nella descrizione dell’intestazione; i valori che può assumere gruppo sono:
  • ROW, specifica che l’intestazione si riferisce alla riga adiacente;
  • COL, specifica che l’intestazione riguarda la colonna sottostante;
  • ROWGROUP e COLGROUP, che associano l’intestazione a gruppi di righe (THEAD, TBODY, TFOOT) e a gruppi di colonne (costrutti COLGROUP/COL).
• Un ulteriore metodo per raggruppare celle senza riferirsi a testate è l’attributo AXIS=”gruppo”.
• La tabella può essere suddivisa in più sezioni logiche: CAPTION, che identifica il titolo della tabella, THEAD e TFOOT, rispettivamente le parti di testata e di pie’ di pagina, e TBODY che contiene il corpo della stessa;
• Se il testo di intestazione è troppo lungo, si possono introdurre abbreviazioni con l’attributo ABBR=”abbreviazione” nella cella di intestazione; allo stesso modo, se si vuole mostrare nelle intestazioni un testo abbreviato, si può usare ABBR=”testo esteso” per esplicitarlo nella lettura degli screen reader (vedere esempi).
• L’attributo SUMMARY=”sommario” del tag TABLE consente di indicare una breve descrizione della tabella che verrà letta dalla voce dello screen reader ma che non verrà visualizzato; può essere utilizzato per fornire maggiori dettagli sul contenuto della tabella stessa.

L’utilizzo di TD e TH, dell’attributo SUMMARY e dei costrutti HEADERS/ID sono sufficientemente supportati dagli ausili più recenti ed è prevedibile che in futuro tale supporto venga ancora migliorato.

Tabella semplice

Esempio di tabella semplice con abbreviazioni.

Da notare il codice iniziale:

<table summary="agenda, divisa in righe da una settimana ciascuna">
<caption> Aprile 2005</caption>
<tr>
<th abbr="Luned&igrave;" id="ag_lu" scope="col">Lu</th>

Tabella complessa

Il cui il codice più importante è

<table summary="La tabella mostra per ciascun dipendente i giorni lavorati e lo stipendio percepito, con totali di reparto e generale" >
<caption>Tabella dipendenti</caption>
<tr>
<th id="dip">Dipendente</th>
<th id="gio" abbr="Giorni">Giorni lavorati</th>
<th id="stip" abbr="Stipendio">Stipendio in euro</th>
</tr>

<tr>
<th id="rep1" headers="dummy" colspan="3">Reparto formazione</th>
</tr>

<tr>
<th id="d1" headers="dip rep1">Bianchi</th>
<td headers="dip d1 gio">192</td>
<td headers="dip d1 stip">21875</td>
</tr>

Una tabella ben descritta per lo screen reader. E’ stato inserito un sommario che descrive meglio la tabella. Sono stati inseriti vari attributi HEADERS/ID per consentire una corretta comprensione delle singole celle. Si noti l’utilizzo dell’ID dummy nell’unica cella vuota per utilizzarlo come headers delle intestazioni “Reparto formazione”, “Reparto sviluppo” e dei totali. Questo evita che JAWS legga per default la prima cella della colonna (“Dipendente”).

Tabella complessa trasformata in più tabelle semplici

Dipendenti

• Totale giorni lavorati: 748
• Totale stipendi in euro: 80050

Menu della sezione

Per Tecnici

• Server Web
• Pagine (X)HTML
• Fogli di stile CSS
• Immagini
• Link
• Tabelle
• Form
• Multimedia
• Pagine ASP
• Script, applet e plug-in
• RSS
• Riepilogo dei requisiti e verifiche

Link esterni

• La barra dell'accessibilità per Explorer
  versione italiana 2.0