Vai ai contenuti

LAU



Home > realizzare > accessibilità: fogli di stile > Tabelle accessibili con i CSS2


Tabelle accessibili con i CSS2

Realizzare e formattare tabelle accessibili con i CSS2.

a cura di: Fabio Regina | 13 ottobre 2006


Le specifiche HTML 4.01 [link esterno] e le WCAG 1.0 [link esterno] raccomandano di non usare, finché è possibile, le tabelle a scopo di presentazione, ma di riservarne l'uso alla funzione strutturale per la quale sono state progettate: incasellare dati.

Ciò non significa che non possono essere utilizzate tabelle a scopo di impaginazione ma, come lo stesso requisito n° 13 della Legge Stanca [link esterno] afferma, bisogna utilizzarle in modo appropriato:

Qualora si utilizzino le tabelle a scopo di impaginazione:

  • garantire che il contenuto della tabella sia comprensibile anche quando questa viene letta in modo linearizzato
  • utilizzare gli elementi e gli attributi di una tabella rispettandone il valore semantico definito nella specifica del linguaggio a marcatori utilizzato.

In questo breve articolo cercheremo di mostrare come sia possibile realizzare una tabella accessibile, che, attraverso l'utilizzo dei CSS2, è possibile trasformare in modo elegante.

La dimostrazione consisterà nell'illustrazione, in pochi e semplici step, delle tecniche necessarie per la formattazione della tabella.

Step 1: realizziamo la tabella

In questo primo step ciò che ci preme fare è realizzare la tabella di base, ovvero senza css applicato. Pertanto, concentriamoci sul markup di base.
Ecco il codice html della tabella relativa al nostro esempio:

<table summary="Questa tabella contiene la lista ordinata 
alfabeticamente dei tag, attributi ed eventi di XHTML">
<caption>Lista tag XHTML</caption>
<thead>
<tr>
<th id="c1">Tag</th>
<th id="c2">Descrizione</th>
<th id="c3">NN</th>
<th id="c4">IE</th>
<th id="c5">DTD </th>
</tr>
</thead>
<tbody>
<tr>
<td id="c6" headers="c1">&lt;!--...--&gt;</td> <td headers="c6 c2">Marca un commento </td>
<td headers="c6 c3">3.00</td>
<td headers="c6 c4">3.00</td>
<td headers="c6 c5">STF</td>
</tr>
<tr>
<td id="c7" headers="c1">&lt;!DOCTYPE&gt;&nbsp;</td> <td headers="c7 c2">Definisce il tipo di documento</td>
<td headers="c7 c3">&nbsp;</td>
<td headers="c7 c4">&nbsp;</td>
<td headers="c7 c5">STF</td>
</tr>
<tr>
<td id="c8" headers="c1">&lt;a&gt;</td>
<td headers="c8 c2">Marca un'ancora</td>
<td headers="c8 c3">3.00</td>
<td headers="c8 c4">3.00</td>
<td headers="c8 c5">STF</td>
</tr>
</tbody>
</table>

ed ecco il risultato dopo il primo step.

Adesso diamo uno sguardo al codice html che abbiamo utilizzato per la realizzazione della tabella.

Notiamo che al tag <table> è stato associato l'attributo summary.
L'utilizzo dell'attributo summary (obbligatorio) rappresenta un importante accorgimento dal punto di vista dell'accessibilità. Il suo scopo, infatti, è quello di fornire una descrizione della struttura e del contenuto della tabella, destinata a programmi utente non visuali (i normali browser grafici non riproducono il contenuto di questo attributo).

Il tag <caption>, (facoltativo), definisce la didascalia della tabella. Il tag deve essere inserito subito dopo il tag <table> e non può essere ripetuto più di una volta.

I tag <thead> e <tbody> servono per differenziare la tabella in due parti: testata e corpo. Tale suddivisione andrebbe usata nel caso di tabelle molto lunghe e - se adeguatamente supportata dai browser - consentirebbe all'utente di far scorrere sul monitor il corpo della tabella indipendentemente dalla testata che rimarrebbe sempre visibile sullo schermo. Inoltre consentirebbe in stampa di ripetere su ciascuna pagina le informazioni contenute nella testata, in modo da consentire una migliore comprensione dei dati riportati nel corpo della tabella.

Altro elemento fondamentale per l'accessibilità della tabella è il tag <th> acronimo di "table header", cioè "intestazione di tabella"): questo elemento definisce una cella contenente informazioni di intestazione. L'uso di <th> aggiunge un'informazione strutturale in più: dice a qualsiasi programma utente, anche non visuale, che il suo contenuto è un'intestazione, un titolo.

Per rendere esplicite le relazioni tra celle d'intestazione e celle di dati abbiamo utilizzato gli attributi headers e id (anch'essi obbligatori).
Tramite l'attributo id si identifica una cella che contiene informazioni di intestazione: dunque tutte le celle marcate con <th>, ma anche le celle marcate con <td>.

L'attributo headers, invece, serve per risalire alle celle d'intestazione da porre in relazione con la cella corrente. Consideriamo a titolo esemplificativo la cella di dati contenente la scritta "Marca un'ancora".
Osserviamo che l'attribuito headers di questa cella elenca i valori "c8 c2". Questi valori ci dicono che dobbiamo ritrovare le celle marcate rispettivamente da id="c8" e id="c2", per conoscere quali celle, all'interno della tabella, forniscono informazioni d'intestazione sulla cella che contiene il nome "Marca un'ancora".

torna su

Step 2: realizziamo il css base

A questo punto diamo alla tabella una formattazione base tramite i css.
Definiamo il font, i bordi della tabella e il padding, ovvero, la distanza tra il testo all'interno delle celle e i bordi della tabella.
Ecco il css:

table, th, td{
border:1px solid #999;
border-collapse:collapse;
font-size:1em;
font-family:Arial, Helvetica, sans-serif;
text-align:left;
color:#333;
padding:5px;
}
caption{
font-size:1.1em;
}

Questo è il risultato dopo il secondo step.

torna su

Step 3: personalizziamo la tabella

In questa fase illustreremo le tecniche utili alla trasformazione della tabella.
Per darle una formattazione più gradevole abbiamo utilizzato tre gif che caricano uno sfondo per:

  • l'intestazione principale (la prima riga della tabella);
  • l'intestazione secondaria (la colonna sinistra della tabella);
  • le celle <td> della tabella.

Per differenziare il colore di sfondo dell'intestazione principale da quella secondaria, abbiamo applicato a quest'ultima la class="int", così come mostrato di seguito:

<th class="int" id="c7" headers="c1">
&lt;!DOCTYPE&gt;&nbsp;
</th>

Di seguito riportiamo il css completo:

caption{
font-size:1.1em;
font-style:italic;
padding-bottom:10px;
color: #333;
}
table{
border-collapse:collapse;
background: #fbfbfb;
border:1px solid #fff;
font-size:1em;
font-family:Arial, Helvetica, sans-serif;
text-align:left;
}
table th{
font-style:italic;
border:1px solid #fff;
background:url(cube.gif) left top no-repeat;
color:#fff;
font-size:1em;
padding:.7em;
text-align:center;
}
table th.int{
font-style:italic;
border:1px solid #fff;
background:url(cube_th.gif) left top no-repeat;
color:#fff;
font-size:1em;
padding:.6em;
text-align:left;
}
table td{
color:#000;
border:1px solid #fff;
font-size:1em;
padding:.7em;
background:url(cube_tr.gif) left top no-repeat;
}

Ma vediamo la tabella dopo averle associato il css completo mostrato sopra.

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 ]