Tabella accessibile formattata con i CSS

Però adesso lasciamo da parte questo aspetto, seppur importante, politico dell' argomento e vediamo come fare per realizzare una tabella accessibile di cui tanto se ne parla e che fa "dannare" coloro i quali ne fanno un uso improprio per la realizzazione di un layout per le pagine web.

Gli elementi delle tabelle

È bene precisare subito che le tabelle sono state inventate per la gestione dei dati, cioè per rappresentare schematicamente contenuti che potrebbero essere difficoltosi da comprendere, se visualizzati diversamente senza l' ausilio di celle orizzontali e verticali. Il succo di questa premessa è che il vecchio modo di impaginare i siti web, attraverso la gestione di tabelle nidificate, è formalmente scorretto e deve essere sostituito dall' impaginazione tableless, ovvero attraverso l' uso esclusivo di markup strutturale e formalmente corretto, unito alla presentazione attraverso i Fogli di Stile. CAPTION, TH, TR, TD, THEAD, TBODY, TFOOT. Questi sono gli elementi che costituiscono una tabella, o gli elementi che dovremmo usare per costruire correttamente una tabella.

Inserire contenuti più comprensibili

Esistono molti tag in quanto la rappresentazione dei dati nel web, attraverso le tabelle, deve prevedere il caso di coloro i quali accedono alla rete non con un browser grafico ma tramite ausili quali lettori testuali, vocali, braille ecc... Se la tabella non è stata costruita correttamente, il risultato può essere un testo incomprensibile, perchè verrebbe letto in maniera lineare (da sinistra a destra e dall' alto in basso) di colonne contenenti contenuti testuali. Per cercare di risolvere questi problemi, sono stati introdotti degli attributi che indicano al lettore alternativo la struttura della tabella, dandole un senso logico. Tali attributi sono: id, headers, scope, summary.

Realizzare una tabella semplice

Poniamo il caso che si voglia realizzare una semplice tabella; essa potrebbe essere una anagrafica oppure una tabella che stampa a video dei dati inseriti in un DataBase. Conosciamo tutti i tag da usare, però dobbiamo aggiungere qualche attributo, come quelli mostrati più su. La tabella che realizzeremo sarà composta da tre colonne e tre righe.

Nella prima cella avremo il cognome di un ipotetico utente; nella seconda e terza rispettivamente nome e professione. Per motivi di spazio riporto il codice delle intestazioni e della prima riga. Il resto è del tutto simile; cambieranno i dati. Anche se nell' esempio otterremo una tabella dichiarata attraverso un foglio di stile per alcuni dei suoi elementi, non ho ritenuto necessario spiegare come ottenere tale formattazione; essa è facilmente intuibile.

<table summary="Qui un descrizione breve">
<caption>Scheda anagrafica degli utenti</caption>
<tr> 
<th id="header1">Cognome</th> 
<th id="header2">Nome</th> 
<th id="header3">Professione</th> 
</tr> 
<tr> 
<td headers="header1">Verdi</td>
<td headers="header2">Giuseppe</td> 
<td headers="header3">Musicista</td> 
</tr> 
</table>  

L'elemento caption lo si inserisce subito dopo l' apertura del tag <table>; esso funge da "titolo" o didascalia; nel browser viene visualizzato al di fuori della tabella. L'attributo summary serve per spiegare il contenuto della tabella. In questo modo il lettore vocale informerà il visitatore non vedente di quello che c' è all' interno prima di leggere tutto il contenuto. L'attributo headers, invece, associa il contenuto delle celle alle rispettive intestazioni di cella, cioè le celle "superiori" che identificano il contenuto della colonna. In pratica andranno sfruttate le intestazioni di cella, attraverso l' elemento th ed il relativo identificativo id. A questo si riferirà l' attributo headers nelle celle associate. Il lettore alternativo "leggerà" questa tabella come:

...e così via se ci sono altri elementi nella tabella. Ho preparato un esempio di tabella con qualche dato in più, così da renderci conto meglio.

Usare l' attributo "scope"

Questo attributo può essere usato al posto dell'attributo headers, quando si è in presenza di tabelle semplici, come quella vista nell' esempio precedente.

Più specificamente scope indica il "raggio di azione" su cui andrà ad agire. Ovviamente per raggio di azione intendiamo colonne [col], righe [row], raggruppamento di colonne [colgroup] e raggruppamento di righe [rowgroup]. Un esempio di codice con tale attributo potrebbe essere il seguente:

<table summary="Qui un descrizione breve">
<caption>Scheda anagrafica degli utenti</caption> 
<tr> 
<th scope="col">Cognome</th>
<th scope="col">Nome</th>
<th scope="col">Professione</th> 
</tr> 
<tr> 
<td>Verdi</td> 
<td>Giuseppe</td> 
<td>Musicista</td> 
</tr> 
</table>  

Il risultato non cambia; abbiamo ottenuto una tabella identica alla precedente ed accessibile in lettura a lettori testuali, al posto di browser grafici. Realizzata con gli stessi dati della precedente, possiamo vedere questa seconda tabella di esempio.

Come abbiamo potuto vedere in questi due esempi, usare tabelle non è vietato. Basta solo fare un utilizzo "ragionato" ed inserire al loro interno solo e soltanto quello per cui sono state inventate: DATI.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati