Giorno 10 – Presentate subito il contenuto principale

di

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

Condividi:

Franco Carcillo

Sono nato (1956) e vivo a Torino.  Da oltre 26 anni lavoro ('da sempre') presso il Comune di Torino, presso il Sistema Informativo. Mi occupo di web.  Sono infatti Direttore Responsabile dei siti internet della Città, sin dalla loro nascita, nel 1994. Prima del 1994 mi sono occupato di informatica gestionale classica, anche se in ambiente distribuito (mini e pc, sin dal loro apparire nella Civica Amministrazione).  Negli anni 80 mi sono appassionato, nel tempo libero, di telematica.  Mio è stato il primo nodo della rete Fidonet in Torino città (Fido_Torino e  TO_news) nel 1987.  Sono stato anche coordinatore nazionale della rete amatoriale, anche se solo per 6 mesi. Poi ho abbandonato:  troppe le pressioni intorno a quello che doveva essere, alla fine, un semplice hobby. Quando non ci si diverte più, meglio spegnere. Ma la passione telematica è rimasta.  Ed ecco che ho tenuto ogni settimana (sino alla chiusura del giornale!) la prima rubrica di telematica pubblicata  su un quotidiano italiano "StampaSera"; a quei tempi di internet se ne parlava vagheggiandola nei meandri universitari e militari americani. Ho pubblicato il primo speciale pubblicato in Italia riguardante i bbs su BIT della Jackson;  ho collaborato, con altre riviste, tra cui PCWORLD dove ho avuto per lungo tempo una rubrica fissa. Di interner e dei siti, che dire? C'è ancora tanta strada da percorrere: l'accessibilità ne è un'esempio. Ma anche rendere i siti davvero fruibili così come far 'trovare' la montagna di informazioni memorizzate tra le pagine, sono sfide  non da poco. Vi pare? All'Università di Torino, quest'anno, molti studenti hanno partecipato, interessatissimi, ad un mio breve seminario su 'Progettare siti web per la Pubblica Amministrazione, la sfida dell'accessibiltià e usabilità'.  E' stupefacente notare come le persone che usano tutti i giorni la rete e a cui spieghi come e perchè i siti non sono nè usabili nè accessibili si rendano immediatamente conto e capiscano: quasi un velo, un sipario sia stato loro svelato. Ecco perchè ho deciso di tradurre 'Dive into accessibility':  perchè affrontare l'accessibilità non è così difficile. Certo nei siti mastodontici le operazioni possono essere lunghe, ma non vi sono più scuse per partire con nuovi progetti 'alla cieca'.