Giorno 11 – Saltate la barra di navigazione

di

Giorno 11: Saltate la barra di navigazione

Se non volete addentrarvi nelle modifiche ai modelli per presentare subito il contenuto principale, eccovi un compromesso: inserire un link per far saltare la barra di navigazione. Non è la soluzione perfetta (è sempre meglio presentare prima il contenuto principale) ma è un compromesso accettabile, che molti siti web utilizzano.

Questo link per il salto della barra è un normale tag  <a>, come tutti gli altri, ma useremo il CSS per nasconderlo ai browser visuali come Internet Explorer e Netscape. Non distruberà la disposizione della vostra pagina;  sarà completamente invisibile.

A chi serve?

  1. A Marcus. Quando visita la vostra pagina, Lynx visualizzerà il link consentendogli quindi di saltare la barra di navigazione ed andare direttamente al vostro contenuto principale. In Giorno 10: Presentate subito il contenuto principale capirete perchè questo è così importante.
  2. A Jackie. Quando visita la vostra pagina, JAWS leggerà il link e le consentirà di saltare la barra di navigazione ed arrivare direttamente al vostro contenuto principale.

Come fare

Innanzitutto usate il Lynx Viewer per visualizzare la vostra prima pagina e determinare se la barra di navigazione è presentata prima del vostro contenuto principale.  Se questi arriva prima, allora questo suggerimento non vi interessa. Avete un giorno libero, divertitevi!

Ora definite una regola CSS per questo link, per renderlo invisibile ai browser visuali. se avete un foglio di stile esterno, inserite questa regola al fondo. (Se avete più fogli di stile esterni, inserite questa regola solo in quello per Netscape 4.) Se avete una sezione <style> all’inizio del vostro modello, aggiungete questa regola subito dopo il tag <style>.

.skiplink {display:none}

Poi, inserite il link per il salto barra immediatamente dopo il nome del sito e sua descrizione. Non lo trovate? Cercate nel modello le variabili appropriate.

  • Movable Type: cercate <$MTBlogTitle$> e <$MTBlogDescription$>.
  • Greymatter: non ci sono variabili specifiche di modello; cercate il nome e la descrizione breve del vostro sito web.
  • Radio: cercate <%siteName%> e <%description%>.
  • Manila: cercate {homePageLink (siteName)} e {tagLine}.
  • Blogger: cercate <$BlogTitle$>.

Trovate? Subito dopo il nome del sito e la descrizione inserite il link per il salto della barrra:

<a class="skiplink" href="#startcontent">Skip over navigation</a>

Bene, ora avete bisogno di un’ancora a cui il link deve puntare; questa deve essere posizionata all’inizio del vostro contenuto principale. Non trovate il vostro contenuto principale? Non spaventatevi. Anche qui la soluzione è nelle variabili di modello.

  • Movable Type: cercate <MTEntries>.
  • Greymatter: nel modello Main Index, cercate {{logbody}} . In Entry Page, cercate {{entrymainbody}}.
  • Radio: cercate <%bodytext%>.
  • Manila: cercate {bodytext}.
  • Blogger: cercate <Blogger>.

Ora il formato del tag per l’ancora dipende dal tipo HTML che state usando. Verificatelo con il DOCTYPE, e regolatevi di conseguenza:

  • Se usate qualsiasi variante di HTML 4, aggiungete il seguente codice prima del vostro contenuto principale:

<a name="startcontent"></a>

  • Se usate qualsiasi variante di XHTML 1.0, aggiungete il seguente codice prima del vostro contenuto principale:

<a name="startcontent" id="startcontent"></a>

  • Se usate XHTML 1.1, aggiungete il seguente codice prima del vostro contenuto principale:

<a id="startcontent"></a>

Dovreste inserire questo link di salto barra in ogni pagina del sito, così fate che aggiungerlo in tutti i vostri modelli.

 

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