Giorno 10: Presentate subito il contenuto principale

Uno dei principali vantaggi nell’utilizzare una disposizione di pagina basata sui CSS è la facilità con cui è possibile riposizionare gli elementi all’interno del codice sorgente HTML senza effetti collaterali sulla disposizione visiva della pagina, così che il contenuto principale viene visualizzato mentre il resto della pagina è ancora in fase di caricamento. Tuttavia so benissimo che la maggior parte dei siti web usa ancora una disposizione visuale basata sull’uso delle tabelle, e dunque questi suggerimenti sono utili proprio in questo caso.

Se avete una disposizione con tabelle, con una barra di navigazione sulla sinistra, questa viene presentata ai navigatori non vedenti come Marcus e Jackie prima del vostro contenuto principale. Non c’è modo di descrivere quanto questo sia un problema, dovreste rendervene conto direttamente:

  1. Esempio di disposizione a tabella.
  2. Disposizione modificata, con il contenuto al primo posto. Queste due disposizioni sono visualizzate in modo identico nei browser visuali, ma in Lynx la differenza è ovvia. 
  3. Come Lynk visualizza la disposizione originale.
  4. Come Lynk visualizza la disposizione modificata. Prima viene visualizzato il contenuto principale, poi arriva la barra di navigazione.

Non c’è bisogno di riprogettare il vostro modello di pagina da zero per evitare questo problema.
C’è una tecnica (relativamente) semplice, un ”trucco”, che presenta al navigatore subito il contenuto principale, sempre mantenendo la barra di navigazione a sinistra.

A chi serve?

  1. A Marcus. Come dimostrano gli esempi precedenti, Lynx visualizza il contenuto nell’ordine in cui appare nel codice sorgente HTML. Ciò significa che Marcus deve sorbirsi la lettura di tutta la barra di navigazione ogni volta che viene a visitare la vostra pagina. Una vera scocciatura.
  2. A Jackie. JAWS, come Lynx, presenta il contenuto nell’ordine in cui appare nel codice sorgente HTML non nell’ordine in cui appare a video. Con JAWS,  il problema è ancora più grave, perchè Jackie deve stare a sentire JAWS leggere tutta la vostra barra di navigazione prima di ascoltare qualsiasi vero contenuto.   E non c’è modo di saltare al contenuto principale. (Ne riparleremo domani.)
  3. A Google. Google dà più peso al contenuto più vicino all’inizio della pagina. Cioè a quello che si trova all’inizio del codice sorgente HTML, non a quello che realmente viene visualizzato in cima alla pagina web. Infatti, molte persone che conoscono questa tecnica, lavorano per le aziende di ottimizzazione e posizionamento dei siti nei motori di ricerca; per loro, i benefici dell’accessibilità sono secondari.

Come fare

Date un’occhiata al vostro sito con il Lynx Viewer e guardate se gli articoli del giorno sono visualizzati subito, prima della barra di navigazione. Il modello preimpostato di Movable Type lo fa correttamente; se lo usate, o se usate un modello basato su quello preimpostato, probabilmente non dovete fare più nulla.  Ma guardate il sito comunque con il  Lynx Viewer, perchè vi darà una conoscenza più approfondita di che cosa stiamo parlando.

Se usate uno dei modelli preiompostati di Radio,  potreste aver bisogno di adattare le tabelle in modo da inserire prima il contenuto principale della pagina. Non c’è un semplice copia-incolla per farlo; dovete analizzare il vostro modello e guardare la struttura della tabella. L’ esempio di disposizione e l’ esempio di disposizione modificata vi mostrano la tecnica di base.

Invece di usare l’ovvia disposizione:

<table>

<tr>

<td valign="top" align="left" width="25%">

... navigation bar ...

</td>

<td valign="top" align="left">

... main content ...

</td>

</tr>

</table>

Facciamo invece:

<table>

<tr>

<!-- spacer GIFin upper-left cell -->

<td><img src="/images/1.gif" width="1" height="1" alt=""></td>

<!-- main content cell first, with rowspan=2 -->

<td valign="top" align="left" rowspan="2">

... main content ...

</td>

</tr>

<tr>

<td valign="top" align="left" width="25%">

... navigation bar ...

</td>

</tr>

</table>

Approfondimenti