Vai ai contenuti

LAU



Home > realizzare > accessibilità: codice HTML/XHTML > Accesskey: si, no, forse


Accesskey: si, no, forse

Funzionalità, vantaggi e difetti delle scorciatoie da tastiera.

a cura di: Andrea Di Pizio e Fabio Regina | 14 luglio 2006


1. Utilizzo degli accesskey

L'utilizzo delle combinazioni da tastiera per la navigazione dei siti web rappresenta uno degli aspetti controversi dell'accessibilità. Gli accesskey dovrebbero rendere più agevole la fruibilità dei contenuti web a tutte le categorie di utenti, sia normodotati che diversamente abili (si pensi ad esempio agli utenti con disabilità motorie che trovano difficoltà ad utilizzare il mouse), ma diversi sviluppatori ne contestano la reale utilità.

Il punto di controllo 9.2 [link esterno] delle WCAG 1.0 sottolinea come l'utente dovrebbe essere in grado di interagire con un interprete (e il documento che esso rende) usando i dispositivi di input (tastiere, display braille, bacchette manovrate con la testa, microfoni, etc.) e output (monitor, sintetizzatori vocali e dispositivi braille) supportati, secondo la propria scelta e secondo i propri bisogni.

Assicurarsi che ogni elemento che possiede una sua specifica interfaccia possa essere gestito in una modalità indipendente da dispositivo. [Priorità 2]

Il punto di controllo 9.5 [link esterno] raccomanda l'utilizzo dell'attributo accesskey, anche se non fa chiarezza sul modo in cui utilizzarlo:

Fornire scorciatoie da tastiera per i collegamenti importanti (compresi quelli nelle immagini sensibili sul lato client), per i controlli dei moduli, e per i gruppi di controlli dei moduli. [Priorità 3]
Per esempio, in HTML, specificare scorciatoie tramite l'attributo "accesskey".

Nel linguaggio XHTML la possibilità di saltare a un determinato contenuto con la tastiera al posto del mouse è fornita dall'attributo accesskey. Assegnando, ad esempio, degli accesskey alle voci di un menu di navigazione è possibile rendere più veloce l'accesso ai menu e alle sue funzioni senza fare uso del mouse.

L'attributo accesskey presenta però alcuni punti controversi.

1) Le sue funzionalità variano a seconda del browser o sistema operativo che si utilizza.
Se, ad esempio, per l'attivazione di un link in Explorer, si utilizza la combinazione "Alt + 0", per effettuare la stessa operazione con Opera si utilizza la combinazione di tasti "Shift + Esc + 0" , e con un MacIntosh la combinazione "Ctrl + 0".
Di seguito è riportata una sintesi che spiega le differenze di funzionalità dell'attributo accesskey sui vari browser e sistemi operativi:

  • Alt + [accesskey] in Internet Explorer (Windows), Firefox (Windows), Mozilla (Windows), Netscape 6+ (Windows)
  • Shift + Esc + [accesskey] in Opera 9 (Windows o Mac)
  • Ctrl + [accesskey] in Internet Explorer 5.2 (Mac), Safari 1.2 (Mac), Firefox (Mac), Mozilla (Mac), Netscape 6+ (Mac)

2) L'utilizzo delle lettere come valore degli attributi accesskey può essere causa di conflitto con i tasti predefiniti degli user agent.
Le combinazioni da tastiera con le lettere sono già una caratteristica standard di molti sistemi operativi, applicazioni desktop e browser. Ad esempio, nella maggioranza delle applicazioni web digitando "Alt + F" si accede al menu "File". Questa standardizzazione dei comandi da tastiera rende, da una parte, più facile e più veloce l'accesso ai menu e alle sue funzioni senza fare uso del mouse ma dall'altra genera dei conflitti con le funzioni predefinite dei browser grafici o testuali.
Il conflitto fra accesskey e tasti predefiniti degli user agent è, ad esempio, uno dei principali motivi per cui sarebbe sconsigliato usare le lettere per accesskey. L'alternativa è quella di utilizzare i numeri anche se tale scelta nasconde pure delle insidie. Ad esempio, la combinazione da tastiera con il numero "1"è utilizzato da Home Page Reader, un browser vocale, per leggere le intestazioni della pagina. Dunque, se usiamo il valore "1", potrebbe accadere che un utente di Home Page Reader incontri un conflitto con le funzionalità predefinite del browser vocale.

3) Generare accesskey per tutti i link di una pagina potrebbe essere un operazione dispendiosa.
Si immagini di utilizzare un accesskey per ogni link presente in un portale. Sarebbe unoperazione dispendiosa che richiede anche uno sforzo cognitivo notevole da parte dell'utente. Sarebbe, invece, una soluzione più ragionevole prevedere un accesso facilitato solo per il menu di navigazione principale (home page, sezioni principali, link skip-navigation per accedere direttamente al contenuto, e così via) e per le funzioni principali del sito (motore di ricerca, newsletter, news, etc.).

4) Gli utenti non possono conoscere a priori le variabili assegnate agli attributi accesskey
Non esiste ancora una convenzione standard su come rendere nota la presenza di queste scorciatoie agli utenti vedenti che visitano il sito o la pagina.
Una convenzione non universalmente accettata è comunque quella di riportare prima o dopo l'etichetta, tra parentesi quadre, il valore che consente l'attivazione da tastiera del collegamento (o del campo modulo, nel caso che la scorciatoia sia applicata ad un campo di input).
Un'altra possibile soluzione - la più utilizzata - è quella di fornire una pagina di supporto alla navigazione. Solitamente si tratta di uno schema di navigazione agevolata in cui vengono specificate tutte le combinazioni utilizzate per facilitare la navigazione del sito.

Molto spesso non è possibile dare una soluzione conforme ai problemi posti in precedenza. Non è stata ancora definita una convenzione standard che associ determinati tasti a specifiche funzioni: ciò comporta per gli utenti la necessità di leggere e imparare le associazioni tasto/funzione per ogni sito che utilizza scorciatoie da tastiera. Tale passaggio obbligato potrebbe comportare un sensibile dispendio di tempo, con conseguente vanificazione dell'utilità degli acceskey.
Forse per l'impossibilità di dare una risposta a questo problema, i requisiti tecnici della legge Stanca non parlano in maniera esplicita di accesskey.
Il requisito n.19 [link esterno] si limita a raccomandare di

[. . . ] prevedere meccanismi che consentano di evitare la lettura ripetitiva di sequenze di collegamenti comuni a più pagine.

Ma tali meccanismi non si identificano nell'utilizzo di accesskey, ma possono essere semplici collegamenti, sommari e menù nascosti che servano da orientamento per gli utenti che navigano con l'ausilio di lettori vocali. (Questa, infatti, è stata la scelta del nostro sito).
Una possibile soluzione (di improbabile realizzazione, ma che potrebbe garantire un'utilità condivisa degli accesskey) potrebbe essere quella di creare una standardizzazione internazionale che riservasse un numero di tasti alla funzione di accesso rapido e che fossero sempre uguali per tutti i siti; ad esempio, "0" per il ritorno alla home page, "1" per l'accesso alla ricerca, "2" per la pagina dei contatti, ecc.

Tra l'altro recentemente il gruppo di lavoro del W3C ha introdotto nelle Working Draft dell'XHTML 2.0 [link esterno] un nuovo sistema per mappare e accedere agli elementi interni di una pagina web, attraverso l'utilizzo dell'elemento access in sostituzione dell'attributo accesskey. Quindi, siamo in attesa di nuovi risvolti.

Di seguito, per chi voglia comunque utilizzare le chiavi d'accesso rapido, cercheremo di capire come utilizzare l'attributo accesskey proponendovi un esempio di menu di navigazione accessibile da tastiera.

torna su


2. Esempio

Per prima cosa realizziamo il menu di navigazione. Di seguito vengono forniti il codice HTML e il foglio di stile associato.

HTML:

<div id="menu">
<ul>
<li id="active"> <a href="_home.htm" accesskey="0" title="Home">Home [0]</a> </li> <li> <a href="_accessibilita.htm" accesskey="1" title="Accessibilit&agrave;">Accessibilit&agrave; [1]</a> </li> <li> <a href="_usabilita.htm" accesskey="2" title="Usabilit&agrave;">Usabilit&agrave; [2]</a> </li>
<li> <a href="_xml.htm" accesskey="3" title="XML">XML [3]</a> </li> <li> <a href="_css.htm" accesskey="4" title="CSS">CSS [4]</a> </li>
<li> <a href="_javascript.htm" accesskey="5" title="Javascript">Javascript [5]</a> </li>
<li> <a href="_php.htm" accesskey="6" title="PHP">PHP [6]</a> </li>
<li> <a href="_flash.htm" accesskey="7" title="Flash">Flash [7]</a> </li> </ul>
</div>

CSS:

div#menu{
margin:20px 0;
}
ul{
list-style:none;
margin:0;
padding:0;
}
ul li{
display:inline;
margin:0;
padding:0;
}
div#menu ul li a:link, 
div#menu ul li a:visited{
background-color:#cccc66;
color:#fff;
padding:8px 10px;
font-weight:bold;
text-decoration:none;
}
div#menu ul li a:hover, 
div#menu ul li a:focus, 
div#menu ul li a:active{
padding:8px 10px;
background-color:#666600;
}
div#menu ul li#active a{
padding:8px 10px;
background-color:#666600;
}

Se diamo uno sguardo al codice html utilizzato per realizzare il nostro menu di navigazione notiamo che ad ogni voce link è stato associato l'attributo accesskey. Non bisogna comunque dimenticare che tale attributo può essere associato anche ai seguenti elementi HTML:

  • area
  • button
  • input
  • label
  • legend
  • textarea

Tornando al nostro esempio, l'attributo accesskey, associato ad ogni elemento a, svolge una funzione importante. Infatti, il valore espresso dall'attributo (espresso tra parentesi quadre) combinato con un tasto funzionale della tastiera rappresenta la chiave di accesso ad ogni link.

Provate a navigare il menu utilizzando soltanto le combinazioni da tastiera.

Per la maggior parte dei browser (Mozilla, Firefox, Netscape 6+, Internet Explorer), come detto precedentemente, l'attivazione dei link richiede solo la combinazione tra il tasto "Alt" e il valore espresso dall'attributo accesskey. Per esempio, nel nostro menu abbiamo attribuito al link "Home" il valore "0", al link "Accessibilità" il valore "1", al link "Usabilità" il valore "2", e così via. In Firefox, per attivare il link "Home", bisogna digitare dalla tastiera "Alt + 0"; la stessa operazione con Internet Explorer può essere effettuata digitando dalla tastiera "Alt + 0" e premere il tasto "Invia". Mentre con Opera bisogna digitare "Shift + Esc + 0".

torna su


3. Risorse sul web

WCAG 1.0 [link esterno]
Documento che fornisce una lista di tutti i punti di controllo contenuti nelle "Linee guida per l'accessibilità ai contenuti del Web".

Accesskeys: Unlocking Hidden Navigation [link esterno]
Alcuni consigli su come utilizzare gli accesskey.

Keyboard accessibility [link esterno]
Come migliorare l’accessibilità da tastiera usando gli attributi accesskey e tabindex.

Una commedia moderna: l'accesskey
Riflessioni sull'importanza degli accesskey.

Esperienza con gli accesskey: HTML e JavaScript [link esterno]
Discussione attivata da un utente non vedente sul forum "diodati.org" sull'utilità delle scorciatoie da tastiera.

torna su

[ Torna all’inizio della pagina ]



Sito realizzato dal Laboratorio di Accessibilità e Usabilità del CSI-Piemonte - Dichiarazione di accessibilità

[ Torna all’inizio della pagina ]