- Learn
- Guida Accessibilità dei siti Web pratica
- Un esempio da non seguire: presentazioni con l’HTML
Un esempio da non seguire: presentazioni con l’HTML
Cominciamo con l’analizzare la versione che non segue criteri di accessibilità: quella, cioè, realizzata tramite l’uso di elementi e attributi di presentazione dell’HTML (i brani di codice sono tratti dal file tabforma.htm), nonché tramite l’uso di tabelle di impaginazione (“layout tables”, in inglese), pratica tuttora diffusissima per ottenere griglie del tipo di quella in figura 1, mostrata nella lezione precedente.
Di seguito sono riportate le parti principali del codice HTML utilizzato per realizzare il solo menu di navigazione, visibile nella colonna di sinistra della pagina di esempio.
<!DOCTYPE HTML PUBLIC “-//W3C//Dtd HTML 4.01 transitional//EN”
“http://www.w3.org/tr/html4/loose.dtd”>
<html lang=”it”>
<head>
<title>
Esempio di impaginazione realizzato per mezzo di tabelle
</title>
</head>
<body>
<table border=”0″ cellpadding=”0″ cellspacing=”5″ width=
“100%” bgcolor=”#FFFFFF”>
[…]
<tr>
<td width=”25%” valign=”top” bgcolor=”#FFFFFF”>
<table border=”0″ cellpadding=”0″ cellspacing=”0″
width=”100%”>
<tr>
<td width=”100%” bgcolor=”#808080″>
<table border=”0″ cellpadding=”4″ cellspacing=”1″
width=”100%”>
<tr>
<td width=”100%” bgcolor=”#FFFF66″>
<b><font face=”Tahoma”>Menu di
navigazione</font></b>
</td>
</tr>
<tr>
<td width=”100%” bgcolor=”#EEEEEE”>
<b><a href=”tabforma.htm”><font face=
“Tahoma” size=”2″>Voce di menu
n.01</font></a></b>
</td>
</tr>
<tr>
<td width=”100%” bgcolor=”#FFFFFF”>
<b><a href=”tabforma.htm”><font face=
“Tahoma” size=”2″>Voce di menu
n.02</font></a></b>
</td>
</tr>
[…]
<tr>
<td width=”100%” bgcolor=”#EEEEEE”>
<b><a href=”tabforma.htm”><font face=
“Tahoma” size=”2″>Voce di menu
n.11</font></a></b>
</td>
</tr>
<tr>
<td width=”100%” bgcolor=”#FFFFFF”>
<b><a href=”tabforma.htm”><font face=
“Tahoma” size=”2″>Voce di menu
n.12</font></a></b>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
[…]
</table>
</body>
</html>
La prima cosa che si può notare leggendo questo estratto di codice è che, per ottenere il tipo di impaginazione illustrato nella >figura 1, è stato necessario inserire più tabelle l’una dentro l’altra, come in un gioco di scatole cinesi. Nel listato sopra riportato, che riguarda come abbiamo detto il solo menu di navigazione, le tabelle annidate sono tre (gli elementi table sono evidenziati in grassetto su sfondo giallo). In tutta la pagina, come si potrà constatare leggendone il listato integrale, sono state utilizzate ben dodici tabelle di impaginazione.
Se ne sarebbero forse potute utilizzare di meno, ma al costo di ricorrere – per i numerosi bordi da 1 pixel di spessore – all’uso di immagini spaziatrici, inserite ciascuna in un’apposita cella, che avrebbero finito per complicare ulteriormente la già intricata struttura tabellare.
Notiamo poi la ridondante quantità di codice necessaria per realizzare, con una simile tecnica, una singola voce di menu:
<tr>
<td width=”100%” bgcolor=”#FFFFFF”>
<b><a href=”tabforma.htm”><font face=
“Tahoma” size=”2″>Voce di menu
n.02</font></a></b>
</td>
</tr>
Di tutto questo blocco di codice, l’unico testo visibile nella pagina è la scritta “Voce di menu n.02” (evidenziata in grassetto nel listato). Tutto il resto, con la sola esclusione dell’elemento A, serve per specificare la formattazione e va ripetuto pari pari per ogni voce di menu.
Se vuoi aggiornamenti su Un esempio da non seguire: presentazioni con l'HTML inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Intervista a Mario Viviani, il primo GDE (Google Developer Expert) per Android italiano
Mario Viviani è il primo GDE (Google Developer Expert) per Android italiano. Ci racconta la sua esperienza di publisher di […]