Home > realizzare > accessibilità: codice HTML/XHTML > tabelle accessibili: XHTML e DTD
Il linguaggio XHTML nella versione STRICT risulta particolarmente indicato per la costruzione di siti Web accessibili in quanto consente di separare maggiormente il contenuto dalla presentazione e delegare ai fogli di stile CSS la gestione degli aspetti stilistici. Nell'articolo saranno trattati gli elementi e gli attributi inerenti alle tabelle considerando i criteri pių rigidi e ben definiti dello standard XHTML 1.0.
a cura di: Yvonne Carpegna | 15 giugno 2005
Le regole definite nell'ambito dell'accessibilità ed introdotte dal W3C non aggiungono nuovi tag o nuovi attributi ma specificano la modalità di utilizzo di quelli definiti dal linguaggio di markup HTML 4.01 strutturando il documento web secondo i criteri più rigidi e ben definiti dello standard XHTML 1.0. All'inizio di ogni pagina XHTML viene fortemente incoraggiato l'utilizzo di una dichiarazione di processamento XML con encoding UTF-8 o UTF-16 come riportato di seguito:
<?xml version="1.0" encoding=”UTF-8”?>
insieme alla definizione del DTD (Document Type Definition), tramite la direttiva del doctype, che deve essere rispettata dallo stesso documento XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Facendo un paragone fra i DTD della versione XHTML strict, transitional e frameset, si può osservare come le regole definite dalle tre sintassi inerenti alle tabelle portino ad un'uguale struttura ed inclusione dei tag ma ad una diversa gestione degli attributi. Nel caso del XHTML strict, in particolare, non vengono ammessi alcuni attributi volti a fornire caratteristiche fortemente legate allo stile delle tabelle quali:
align, bgcolor nel tag tablealign nel tag captionbgcolor nel tag trnowrap, bgcolor, width, height nel tag th e tdDi seguito viene riportato un estratto del DTD relativo all'XHTML strict inerente alla definizione delle tabelle.
TABLE…
<!ELEMENT table (caption?, (col* | colgroup*),
thead?, tfoot?, (tbody+ | tr+))>
<!ELEMENT caption %Inline;>
<!ELEMENT thead (tr)+>
<!ELEMENT tfoot (tr)+>
<!ELEMENT tbody (tr)+>
<!ELEMENT colgroup (col)*>
<!ELEMENT col EMPTY>
<!ELEMENT tr (th | td)+>
…
Il frammento del DTD strict relativo alle tabelle può essere convertito in XML-Schema (ad esempio: tramite il tool di sviluppo XML-Spy 2005) e successivamente può essere visualizzato nella forma grafica riportata di seguito per comprendere più intuitivamente il suo significato. In particolare, dalla rappresentazione in figura emergono con chiarezza ed immediatezza le relazioni di inclusione che intercorrono tra i vari tag e le cardinalità con cui questi possono all'interno di una specifica istanza di tabella.
Fig. 1 Diagramma relativo al DTD
Se si vuole dare un equivalente testuale della figura, il DTD strict definisce che il tag table può contenere:
captioncol e "zero o più" tag colgroup, che a sua volta può includere una sequenza di tag colthead, che a sua volta può includere una sequenza di righe rappresentate dal tag tr al cui interno deve essere definita almeno una colonna di intestazione th o una colonna normale con il tag tdtfoot, che a sua volta può includere una sequenza di righe rappresentate dal tag tr al cui interno deve essere definita almeno una colonna di intestazione th o una colonna normale con il tag tdtbody (che a sua volta può includere una sequenza di righe rappresentate dal tag tr al cui interno deve essere definita almeno una colonna di intestazione th o una colonna normale con il tag td) o almeno una riga tr di tag th o di td.Continuando ad analizzare il DTD strict relativo alle tabelle, si possono analizzare le regole sintattiche legate all'utilizzo di determinati attributi associati ai tag che le caratterizzano.
| Attributi | Valore/Tipo | Descrizione |
|---|---|---|
id |
testo | Identificatore dell'elemento nell'ambito del document |
class |
testo | Identificatori di stile nell'ambito del document |
style |
testo | stile da applicare sul tag nel quale viene definito |
title |
testo | titolo dell'elemento |
lang |
testo | informazioni sulla lingua |
xml:lang |
testo | informazioni sulla lingua |
dir |
ltr|rtl | direzionalità di una tabella |
onclick |
JavaScript | evento: click |
ondblclick |
JavaScript | evento:doppio click |
onmousedown |
JavaScript | evento: puntatore premuto sopra un elemento |
onmouseup |
JavaScript | evento: puntatore rilasciato sopra un elemento |
onmouseover |
JavaScript | evento: puntatore mosso sopra un elemento |
onmousemove |
JavaScript | evento: puntatore in movimento sopra un elemento |
onmouseout |
JavaScript | evento: puntatore mosso via da un elemento |
onkeypress |
JavaScript | evento: tasto premuto e rilasciato |
onkeydown |
JavaScript | evento: tasto premuto |
onkeyup |
JavaScript | evento: tasto rilasciato |
| Tag | Attributi | Valore/Tipo | Descrizione |
|---|---|---|---|
table |
summary |
testo | descrizione di scopo e struttura della tabella per sintetizzatori vocali |
border |
numero | ampiezza del bordo della tabella | |
frame |
void|above|below| hsides| lhs|rhs| vsides|box|border |
parti del bordo da visualizzare | |
rules |
none | groups | rows | cols | all |
bordo tra righe e colonne | |
cellspacing |
numero | spaziatura tra celle | |
cellpadding |
numero | spaziatura interna delle celle | |
colgroup |
span |
numero | numero predefinito di colonne raggruppate |
width |
numero | larghezza della colonna | |
align |
left|center|right| justify|char |
allineamento orizzontale | |
char |
carattere | definizione di un carattere rispetto al quale allineare la colonna | |
charoff |
numero | offset per il carattere di allineamento | |
valign |
top|middle| bottom|baseline |
allineamento verticale | |
caption |
didascalia della tabella | ||
thead |
align |
left|center|right| justify|char |
allineamento orizzontale |
tfoot |
char |
carattere | carattere di allineamento |
tbody |
charoff |
numero | decentramento per il carattere di allineamento |
tr |
valign |
top|middle| bottom|baseline |
allineamento verticale |
th, td |
axis |
testo | creazione di relazioni per categorie tra i dati, due dati con lo stesso axis fanno parte della stessa categoria |
abbr |
testo | abbreviazione per cella d'intestazione | |
headers |
testo | elenco di intestazioni correlate separato da spazi | |
scope |
row|col|rowgroup| colgroup |
ambito coperto da celle d'intestazione | |
rowspan |
numero | numero di righe su cui si estende una cella | |
colspan |
numero | numero di colonne su cui si estende una cella | |
align |
left|center|right| justify|char |
allineamento orizzontale | |
char |
carattere | carattere di allineamento | |
charoff |
numero | offset per il carattere di allineamento | |
valign |
top|middle| bottom|baseline |
allineamento verticale |
[ Torna all’inizio della pagina ]
[ Torna all’inizio della pagina ]
[ Torna all’inizio della pagina ]
[ Torna all’inizio della pagina ]
[ Torna all’inizio della pagina ]
[ Torna all’inizio della pagina ]
[ Torna all’inizio della pagina ]
[ Torna all’inizio della pagina ]
Sito realizzato dal Laboratorio di Accessibilità e Usabilità del CSI-Piemonte - Dichiarazione di accessibilità