Affrontare l'accessibilità

per un sito più accessibile in 30 giorni

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:

A chi serve?

1. 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.
2. 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'attributo accesskey="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 miei accesskey suggeriti si riferiscono a numeri anzichè lettere.
• Paul Bohman: Access keys, IE6. Parte di una discussione su accesskey nel Web Accessibility Forum Mailing List.