L'attributo Summary e l'attributo TH



Vediamo ora invece come si può riscrivere il codice della precedente tabella, inserendovi opportuni accorgimenti di accessibilità (che appaiono evidenziati nel listato seguente):

<table border="1" cellpadding="5" cellspacing="2" summary="Corsi di storia offerti nella comunit&agrave; di Bath, organizzati per nome del corso, insegnante, sommario, codice e tassa d'iscrizione">
  <tr>
    <th colspan="5" scope="colgroup">
Corsi comunitari—Bath,
Autunno 1997
</th>
  </tr>
  <tr>
    <th scope="col" abbr="Corso">Nome del corso</th>
    <th scope="col" abbr="Prof">Insegnante</th>
    <th scope="col" abbr="Desc">Descrizione</th>
    <th scope="col">Codice</th>
    <th scope="col">Tassa</th>
  </tr>
  <tr>
    <td scope="row">Dopo la Guerra Civile</td>
    <td>Dr. John Wroughton</td>
    <td>Il corso esaminer&agrave; i turbolenti anni in Inghilterra dopo il 1646. <em>6 incontri settimanali, a partire da Luned&igrave; 13 Ottobre.</em></td>
    <td>H27</td>
    <td>&pound;32</td>
  </tr>
  <tr>
    <td scope="row">Introduzione all'Inghilterra degli
Anglo-Sassoni</td>
    <td>Mark Cottle</td>
    <td>Corso di un solo giorno, introduttivo alla ricostruzione della societ&agrave; anglo-sassone nel Primo Medioevo. <em>Sabato 18 Ottobre.</em></td>
    <td>H28</td>
    <td>&pound;18</td>
  </tr>
  <tr>
    <td scope="row">Lo splendore della Grecia Antica</td>
    <td>Valerie Lorenz</td>
    <td>Luogo di nascita della democrazia, della filosofia, patria d'elezione del teatro e della disputa logica. Ci&ograve; che i Romani hanno fatto, i Greci lo avevano realizzato per primi. <em>Sabato 25 Ottobre 1997 (giorno scolastico)</em></td>
    <td>H30</td>
    <td>&pound;18</td>
  </tr>
</table>


Notiamo innanzitutto la presenza dell'attributo "summary" nell'elemento table. Il suo scopo è 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). Bisognerebbe compilare il "summary" di una tabella di dati come se volessimo far capire a qualcuno per telefono come è fatta e cosa contiene la tabella.

Altro elemento fondamentale per l'accessibilità di una tabella di dati è TH (l'acronimo sta per "table header", cioè "intestazione di tabella"): questo elemento definisce una cella contenente informazioni di intestazione. Notate dunque che tutte le celle delle prime due righe della tabella sono state rese, in questa nuova versione, per mezzo di elementi TH, mentre nella versione precedente erano dei normali td, il cui contenuto veniva evidenziato con lo stile grassetto. 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.

Ultimi articoli Web design

Metro, il "linguaggio di design" di Windows 8

I principi ispiratori del "linguaggio di design" utilizzato da...

Bootstrap: il framework di Twitter

Sviluppare applicazioni web sfruttando il framework con cui è stato...

Sfondi a tutta pagina con jQuery

Come avere degli sfondi a tutta pagina sui vostri siti web, per...

Grid design, dalla tipografia al web

Design coerenti e layout consistenti, usando principi di...

Art Direction e Design

Capire la differenza tra la direzione artistica di un progetto e il...

Altri articoli

Guide Web design

Guida Pubblicare un sito web

Le verifiche fondamentali da effettuare prima del lancio di un nuovo...

Guida Web Writing

Saper scrivere per il Web è una delle armi per attirare utenti e per...

Guida Accessibilità dei siti Web teorica

Questa guida è finalizzata sostanzialmente a una conoscenza e a una...

Altre guide

Newsletter @Grafica e Web Design

Ogni settimana, direttamente nella tua e-mail: guide, articoli, tutorial e FAQ su Web Design e grafica per il Web.

Iscriviti alla newsletter

Altre newsletter

Corsi in aula

Corso Google AdWords Base

25 Giugno 2012 a Milano
Disponibilità: 7 Posti

Corso Google AdWords Base

05 Giugno 2012 a Roma
Disponibilità: 7 Posti