Il nostro sito web, una volta on-line, risulta essere alla portata di tutti e quindi facilmente raggiungibile da ogni parte del mondo e da tutti gli esseri umani. Anche le persone che risulteranno limitate nella gestualità e nei movimenti potranno risultare interessate ai contenuti di un sito ed in particolare del nostro, e purtroppo in alcuni casi queste persone saranno impossibilitate ad usare il mouse.
Il W3C ha introdotto gli accesskey, attributi che permettono di selezionare il link desiderato, al fine di navigare tra le pagine di un sito, attraverso l'utilizzo della sola tastiera.
GLi accesskey sono oggi supportati dai seguenti browser:
- Internet Explorer dal 4 in poi (Windows) dal 5 in poi (Mac)
- Mozilla (Windows + Linux)
- Netscape dal 6 in poi (Windows)
- Opera 7 (Windows + Linux)
Gli utenti di Windows possono utilizzare gli accesskey tramite la tastiera premendo il tasto
di scelta rapida (Alt) seguito dalla lettera associata al collegamento, mentre gli utenti Mac
useranno control (CTRL) seguito dal tasto accesskey.
Gli utenti del Internet Explorer potranno avere bisogno di premere il tasto "enter" per
attivare il collegamento.
Da questa breve spiegazione degli accesskey risulta percettibile l'importanza di porre il
risalto quale lettera sia associata al collegamento, poichè il nostro utente dovrà riconoscerla
in maniera nitida per accedervi.
Sottilineare, usare un font più grande, mettere tra parentesi sono i modi più usati per
evidenziare gli accesskey.
Uno sguardo al codice:
Alcuni browsers, tra i quali Internet Explorer, visualizzeranno la prima lettera sottolineata.
Altri browsers tipo Mozilla, invece, visualizzeranno l'accesskey quando la voce di menu è selezionata,
Safari, visualizzeranno entrambi i tipi di suggerimenti di accesskey.
Tutti i browsers che sostengono questa caratteristica potranno usare i accesskeys senza
riguardo al modo in cui sono visualizzati.
<div id="keymenu"> <ul> <li><a href="" accesskey="h">(H)ome</a></li> <li><a href="" accesskey="p">(P)revious</a></li> <li><a href="" accesskey="n">(N)ews</a></li> </ul> </div>
il css:
a {
text-decoration: none;}
a:hover {
text-decoration: underline;}
a:first-letter {
text-decoration: underline;}
#keymenu {
width: 130px;
border: 1px solid navy;
border-top: none;
padding: 0px;
color: navy;
}
#keymenu ul {
list-style: none;
margin: 0px;
padding: 0px;
width: 130px;
}
#keymenu li {
border-top: 1px solid navy;
padding: 0px;
margin: 0px;
}
#keymenu li a {
color: navy;
background: #fff;
display: block;
padding: 5px;
text-decoration: none;
font-weight:bold;
width: 120px;
}
#keymenu li a:hover {
background-color: #98cdf4;
font-weight:bold;
}
#keymenu li a:hover:after, #keymenu li a:focus:after {
content: " [" attr(accesskey) "] ";
}