Menu di navigazione accessibile con stato focus ed accesskey

Cominciamo a vedere lo stato della pseudoclasse a:focus.

Tale comportamento, posso dire del tutto identico a quello a:hover, differisce solo nel "modo" con cui ottenerlo, cioè: quando passiamo su un link (testo o immagine che sia), se è stato associato un colore diverso o una seconda foto, possiamo vedere il classico "mouse over" mentre passiamo con il mouse; vale a dire un secondo colore associato al link oppure un' altra immagine. Invece lo stato a:focus evidenzierà una eventuale personalizzazione con la navigazione "tabulare", vale a dire spostandosi con il tasto TAB all' interno della pagina.

L' attributo XHTML accesskey permette, agli utenti con delle particolari difficoltà fisiche, di navigare sempre con la tastiera al posto del mouse, ma essi devono sapere "quale" tasto premere per potersi spostare attraverso i link. Questo è quello che realizzaremo.

Riassumendo: navigazione con doppia opzione, cioè mouse oppure tastiera. Quando ci si sposterà con il tasto TAB nella pagina, verranno evidenziati i link proprio per rendere più agevole il tutto.

Realizziamo la barra di navigazione

Per ottenere la nostra barra di navigazione avremo bisogno di due sole immagini della misura di 108 per 35 pixel, realizzate con un qualsiasi editor grafico. Esse saranno i nostri pulsanti. Tali immagini faranno da "background" per ogni link della barra, in quanto andremo a scrivere su questi sfondi il testo dei nostri link. Cominciamo a vedere il codice:

#menu
{
text-align:center; 
border-width: 0 1px 0 1px; 
border-style: solid; 
border-left-color: #dde0e3;
border-right-color: #dde0e3; 
height: 35px; 
padding: 0; 
margin:20px auto;
width:754px;
}
html>#menu{ width:754px; } 

Creiamo un elemento di blocco con ID univoco (#menu); questo elemento sarà largo 756 pixel, alto 35; bordo sinistro e destro pari ad un pixel, di colore grigio chiaro.

Il codice scritto di seguito serve per i browser Opera; capiscono il box model ma potrebbero considerare il valore sbagliato. È un piccolo bug anche questo. Lo stesso Celik lo risolve scrivendo una regola "più specifica" per Opera.

Realizzare l' elenco

Il codice CSS per l' elenco è il seguente:

#menu ul {
margin:0; 
padding:0; 
list-style-type:none; 
height:35px; 
width:756px; 
} 
#menu li { 
padding:0; 
margin:0; 
display:inline;
width:108px; 
height:35px; 
float:left;
}

Il codice dovrebbe essere di facile comprensione. Eliminiamo i marcatori elenco (list-style-type: none;); dichiariamo la larghezza e l' altezza uguali a quelle del #menu (756 x 35 pixel). Nel codice che deve servire per ogni singola voce (#menu li) impostiamo la larghezza e l' altezza (108 pixel per 35) pari a quelle della gif. Flottanti a sinistra (float:left;) ed in linea (display: inline;) anzichè elemento di blocco, come da impostazione predefinita. Adesso passiamo agli stati dei link:

#menu a {
display:block;
padding:0; 
line-height:35px; 
text-align:center; 
width:108px; 
color:#000;
text-decoration: none;
font-weight: bold;
font-size:90%;
background:url(btn.jpg) 
no-repeat 0 0; 
}  

La pseudoclasse a (sarebbe lo stato a:link) prevede che tutta l'area dell' immagine sia linkabile (display:block;). Testo allineato verticalmente (line-height:35px;) ed al centro in orizzontale (text-align:center;). Come sfondo avremo l' immagine (background:url(btn.jpg) no-repeat 0 0;). Questo serve a "pre-caricare" la gif al momento dell' apertura della pagina. Gli altri 2 stati dei link sono:

#menu a:hover, #menu a:focus{ 
color:#333;
text-decoration:none;
background:url(btn_h.jpg) no-repeat 0 0; 
}  

In questo caso vogliamo dare lo stesso comportamento alle 2 pseudoclassi :hover e :focus. Come spiegato all' inizio dell' articolo, servono per poter navigare sia con il mouse che con la tastiera. Abbiamo un testo di colore quasi nero e lo sfondo (immagine di background) sarà costituito dalla seconda gif, precedentemente realizzata. Inoltre ho creato una classe all' interno del #menu, che ho chiamato ".current":

#menu .current { 
display:block; 
padding:0;
line-height:35px;
text-align:center;
width:108px;
font-weight:bold;
font-size:90%;
color:#333;
background:url(btn_h.jpg) no-repeat 0 0;
}  

A tale classe non sarà associato nessun link. È semplicemente lo stato "corrente" della pagina che si sta visitando. Una sorta di "voi siete qui".

Scriviamo il codice per la barra di navigazione

Adesso non ci rimane che scrivere il codice nella pagina html:

<div id="menu">
<ul>
<li><a href="#" accesskey="1" title="Link 1"  >Link 1 [1]</a></li>
<li><a href="#" accesskey="2" title="Link 2"  >Link 2 [2]</a></li>
............. 
</ul> 
</div> 

All' interno del #menu scriviamo l' elenco che formerà le voci linkabili. Siccome trattasi di un esempio, ho solo riportato due voci, mentre quello completo ne prevede 7. Dopo il collegamento ( href="#") ecco l' attributo accesskey di cui ho scritto all' inizio. accesskey="1" indica il numero da premere sulla tastiera, accompagnato dal tasto ENTER, perchè si vada a visitare "quella" pagina. Oppure si può "scorrere" la barra di navigazione con il tasto TAB seguito sempre dal tasto ENTER. Dopo tutto questo codice, ecco il file completo trattato nell' articolo.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati