Giorno 15: Definite scorciatoie da tastiera
Una delle funzioni poco conosciute di HTML è quella dell’attributo accesskey,
per link e moduli (form), che consente di definire una scorciatoia da tastiera per i link o i campi dei moduli più usati. In Windows, premendo ALT ed il tasto di accesso scelto; in Macintosh, premendo Control ed il tasto di accesso scelto. Se il tasto di accesso è definito in un link, il browser renderà attivo quel link; se definito in un campo di un modulo, il browser posizionerà il cursore in quel campo. Internet Explorer ha reso disponibili i tasti di accesso rapido sin dalla versione 4, Netscape dalla versione 6. I vecchi browser li ignorano, senza alcun effetto collaterale.
Anche se non ci sono standard su quali tasti indicare come via di accesso rapido, questi sono quelli comunemente utilizzati:
Tasto 1
Home page
Tasto 2
Al contenuto principale (vedi saltate la barra di navigazione)
Tasto 9
Commenti
A chi serve?
- A Jackie. Quando JAWS legge un link che definisce un tasto di accesso rapido, pronuncia anche il tasto così definito. Per esempio, il link
<a href="/" accesskey="1">Home page</a>
sarà letto da JAWS come “link: Home page, ALT + 1”. Jackie può concentrarsi sul link premendo ALT+1 , seguito dal tasto ENTER. - A Bill. Siccome Bill non può usare il mouse a causa del suo ictus, si affida alla navigazione con tastiera ed ai tasti rapidi per mouoversi nella pagina. I tasti rapidi sono un eccellente modo per saltare direttamente sui link più comuni o frequentati. Bill può digitare ALT+1, e Mozilla immediatamente segue il link definito dall’attributo
accesskey="1"
. (Nota: Mozilla non pronuncia i tasti rapidi, ed allora ci si chiede come faccia Bill a scoprirli. Ne discuteremo prossimamente.)
Come fare: il link alla home page
- Movable Type : il modello predefinito non ha un link alla home page, dunque fate diventare il nome del sito un link e associate un
accesskey
. Cercate nel modello<$MTBlogName$>
, e cambiatelo così:
<a href="<$MTBlogURL$>" style="color:black; text-decoration:none" accesskey="1"><$MTBlogName$></a>
- Radio : cercate nel modello
{siteName}
. Probabilmente sarà un link, grossomodo così:
<a href="<%radio.macros.weblogUrl ()%>" style="color:black; text-decoration:none"><%siteName%></a>
Aggiungete semplicemente l’attributo accesskey
al link, così:
<a href="<%radio.macros.weblogUrl ()%>" style="color:black; text-decoration:none"
accesskey=”1″><%siteName%></a>
- Blogger : cercate nel modello
<$BlogTitle$>
. Se è racchiuso in un tag<a>
, aggiungetevi l’attributoaccesskey="1"
, come nell’esempio soprariportato per Radio. Se<$BlogTitle$>
non è racchiuso in un tag<a>,
racchiudetevelo così (inserite l’indirizzo della vostra home page):
<a href="http://address/of/your/home/page" style="color:black; text-decoration:none" accesskey="1"><$BlogTitle$></a>
Come fare: link di salto della barra di navigazione
Se avete un link per saltare la barra di navigazione, allora dategli il tasto rapido accesskey="2"
.
<a class="skiplink" href="#startcontent"
accesskey=”2″>Skip over navigation</a>
Come fare: link ai commenti
Avete un link al modulo dei commenti, o al vostro indirizzo email? Allora dategli il tasto rapido accesskey="9"
.
<a href="mailto:me@mydomain.com" accesskey="9">Email me</a>
Nota: i weblog di Radio generalmente hanno un link ad un modulo per i commenti (con piccola icona a forma di busta), ma è un link generato da una macro, ed è dunque impossibile aggiungervi l’attributo accesskey.
Assicuratevi di includere l’attributo accesskey
in ogni pagina del sito, oltre a cambiare tutti i modelli più significativi.
Approfondimenti
- Jukka Korpela: Improving accessibility with
accesskey
in HTML forms and links. Speiga perchè tutti i mieiaccesskey
suggeriti si riferiscono a numeri anzichè lettere. - Paul Bohman: Access keys, IE6. Parte di una discussione su
accesskey
nel Web Accessibility Forum Mailing List.