Programmazione Web » Html » Realizzare barre di navigazione accessibili
Realizzare barre di navigazione accessibili
Difficoltà:
Scritto da Michele Sassi
Sito Web: http://www.comefaccio.net 
Questo tutorial è stato letto 1483 volte
La creazione di link in (X)HTML è tanto semplice quanto intuitiva. Tutto ciò che occorre è la conoscenza degli attributi e delle proprietà dei link.
Teoricamnte un link potrebbe anche essere formato semplicemente da una key e da un collegamento a cui puntare, ma con uno sguardo un po' più attento ai criteri dell'usabilità e dell'accessibilità ci si accorge subito che è possibile creare delle vere e proprie barre di navigazione accessibili da tastiera anche ai disabili.
Analizziamo pertanto uno ad uno tutti gli attributi che compongono un link:
href
Indica il collegamento (assoluto o relativo che sia) alla pagina a cui puntare. E' possibile anche puntare ad un link esterno al sito puntando direttamente all'url da aprire, come ad es.: http://www.nomedelsito.ext .
tabindex
E' l'ordine in base al quale vengono selezionati i link dopo la pressione del tasto Tab. E' un'attributo molto utile che consente una corretta navigazione del sito anche ai disabili. Sarà quindi sufficiente premere il tasto Tab fino al raggiungimento del link desiderato per ottenere il Focus sul link, e premere invio per aprire l'url linkato.
title
Molto utile anche per l'indicizzazione nei motori di ricerca, permette di visualizzare una descrizione del link quando il mouse è posizionato sullo stesso.
accesskey
Attributo che permette di aprire un link premendo semplicemente Alt + il valore specificato in tale attributo (per ottenere il Focus sul link), seguito dal tasto Invio per l'apertura della pagina. Molto utile per permettere anche ai disabili una corretta navigazione del sito. Per una lettura più approfondita sia dia uno sguardo a questo tutorial.
target
Attributo che specifica in quale finestra del browser dovrà aprirsi la pagina linkata. Ad esempio utilizzando target="_blank" il link verrà aperto in una nuova finestra del browser.
Di seguito viene riportato un esempio con il quale sia possibile creare una perfetta barra di navigazione, tenendo conto ti tutti gli attributi fin qui citati:
<a href="#" tabindex="1" title="Descrizione del Link 1" accesskey="1" target="_blank">Link 1</a><br />
<a href="#" tabindex="2" title="Descrizione del Link 2" accesskey="2" target="_blank">Link 2</a><br />
<a href="#" tabindex="3" title="Descrizione del Link 3" accesskey="3" target="_blank">Link 3</a>
Aggiungi questo tutorial ai preferiti
