[Salta il menu] [L'elefantino con la matita, logo del sito]

Diodati.org | Accessibilità e traduzioni dal W3C Leggi Omega Centauri!

menu sito:

10 Un esempio da non seguire: formattare utilizzando esclusivamente elementi e attributi di presentazione dell'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, 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.

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.

I brani di codice sono tratti dal file tabforma.htm.

<!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.

Leggi: L'alternativa accessibile: formattare utilizzando esclusivamente i CSS level 2
Vai a: Diodati.org > Guide, articoli, scritti > Siti ad elevata accessibilità
Scrivi: info@diodati.org
Ultima modifica: 15/7/2004 ore 15:39

inizio pagina