Come inserire Access Key sul sito

Come inserire Access Key sul sito

1476
2
CONDIVIDI

Parlando in termini di siti web accessibili analizzerò l’attributo accesskey, volto a rendere le pagine facilmente fruibili per le persone con disabilità di vario genere. Chi sviluppa con l’intento di realizzare un sito accessibile non può precludere dall’utilizzare le access key nonostante queste siano oggetto di discussione tra gli sviluppatori poiché non forniscono un buon compromesso tra utilizzatori normodotati e diversamente abili.

D’altronde se andiamo ad analizzare la legge, l’articolo 9.5 delle Linee guida per l’accessibilità ai contenuti del web parla chiaro:

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.
Per esempio, in HTML, specificare scorciatoie tramite l’attributo “accesskey”.

Per quanto discusse possano essere, le scorciatoie da tastiera vanno utilizzate per completare il processo di accessibilità.

Cosa deve fare chi implementa gli Acces Key?

webAccessCourse


Prima di procedere con la parte tecnica mi piace sempre effettuare una panoramica delle cose e su come queste devono essere approcciate:

  1. Organizzazione dei contenuti: La questione fondamentale è quella di non attribuire ad ogni pagina un punto di accesso, anche perché se volessimo sfruttare le potenzialità della tastiera avremmo a disposizione dalla A alla Z e dallo 0 al 9.

    Proprio per questo motivo è buona norma organizzare le pagine e selezionare quelle più importanti che entreranno a far parte della vostra “elite” di contenuti; Tra queste possiamo individuare un menu principale o altre voci preponderanti rispetto al resto.

  2. Implementazione tecnica e test: Il passo successivo a quello della selezione dei contenuti è l’implementazione tecnica delle scorciatoie con tanto di test sui principali browser (dopo vedremo come);
  3. Legenda: Per non vanificare tutto questo lavoro è importante creare una legenda. Di solito realizzo una pagina dedicata con l’elenco delle chiavi di accesso, per rendere ancora più semplice ed intuitivo il sistema creo delle convenzioni per il quale stabilisco la corrispondenza di una lettera all’iniziale della pagina; E’ una tecnica molto comune; esempio:


Access Key Pagina del sito   Access Key Pagina del sito
A Azienda   C Chi siamo
D Dove siamo   N Newsletter
P Progetti   R Rassegna stampa
O Contatti   I Crediti

In questo modo ho creato una convenzione tra le iniziali e i nomi delle pagine, nel caso in cui un’iniziale fosse già occupata seleziono una lettera successiva (vedi Contatti o Crediti).

Utilizzare le Access Key da Browser

Ogni browser ha le sue regole per poter accedere in maniera veloce alle pagine tramite le scorciatoie da noi fornite. Di seguito una tabella esplicativa che permetterà di destreggiarvi in base al browser:

Sistema operativo Browser Versione Note
Windows/Linux Firefox 2.0 ALT + MAIUSC + AccessKey
Windows Internet Explorer 6 e superiori Tenere premuto il tasto ALT e premere l’AccessKey. Rilasciare entrambi i tasti e premi Invio.
Mac OS X Firefox 2 e superiori Tenere premuto il tasto CTRL e contemporaneamente digita l’AccessKey.
Mac OS X Safari Tutte Tenere premuto il tasto CTRL e contemporaneamente digita l’AccessKey.
Windows Chrome Tutte Tenere premuto il tasto ALT e contemporaneamente digita l’AccessKey.

Creazione Access Key in HTML

Di seguito la semplice procedura per realizzare i punti di accesso:

<ul>
  <li><a href="./" accesskey="H" title="Home page">Home page</a> [H]</li>
  <li><a href="chisiamo.html" accesskey="C" title="Chi siamo">Chi siamo</a> [C]</li>
  <li><a href="news.html" accesskey="N" title="News">News</a> [N]</li>
  <li><a href="dovesiamo.html" accesskey="D" title="Dove siamo">Dove siamo</a> [D]</li>
  <li><a href="contattaci.html" accesskey="O" title="Contattaci">Contattaci</a> [O]</li>
</ul>

L’attributo accesskey è riconosciuto sia da HTML che dal W3C.
Un’altra questione facoltativa ma non obbligatoria è quella di associare a fianco ad ogni voce appartenente ad una chiave di accesso una legenda, nell’esempio, infatti, ho inserito l’iniziale del punto di accesso tra parentesi quadre. Un’altra tecnica è quella di evidenziare con una proprietà underlined o strong la lettera appartenente all’access key; Questi due escamotage faciliteranno di molto gli utilizzatori:

<li><a href="./" accesskey="H" title="Home page"><strong>H</strong>ome page</a></li>

Access Key nei forms

Un altro modo per poter utilizzare gli Access Key è quello di permettere la navigazione attraverso i campi di un form, questo metodo tuttavia è poco sfruttato poiché in questi casi è sempre meglio utilizzare l’attributo tabindex che permette di scorrere i campi più facilmente ed in maniera accessibile anche per normodotati attraverso il tasto tab della tastiera.

Esempio:

<label for="nomeutente" accesskey="U">
  Nome Utente
  <input type="text" name="utente" id="nomeutente" />
  <sup>Access Key: <strong>U</strong></sup>
</label>
 
<label for="email" accesskey="I">
  Indirizzo Email
  <input type="text" name="indirizzoemail" id="email" />
  <sup>Access Key: <strong>I</strong></sup>
</label>
  • Gianvito Colletta

    OTTIMO. GRAZIE!

  • piero web

    ciao…complimenti per l’articolo che non descrive solo un procedimento tecnico ma va oltre. sarebbe interessante vista la vastità dell’argomento accessibilità trattare anche altri argomenti…grazie.