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.

 

Questo post è stato pubblicato il giorno: giovedì 29 maggio 2003 alle ore: 10:34 ed è stato collocato in: Affrontare l'accessibilità.
È possibile seguire le risposte a questo post attraverso il feed RSS 2.0.
Le risposte sono attualmente sospese, ma puoi fare un trackback dal tuo sito.