Attributo accesskey in HTML

L'attributo HTML accesskey è un attributo globale che definisce una scorciatoia da tastiera per attivare o mettere a fuoco un elemento specifico. Quando l'utente preme il/i tasto/i modificatore del browser più il carattere assegnato, quell'elemento riceve il focus (e, nel caso di link e pulsanti, viene attivato). Il valore dell'attributo deve essere composto da uno o più caratteri stampabili separati da spazi — il browser utilizza il primo che riesce a supportare.

In HTML 4.01, accesskey poteva essere utilizzato solo con un insieme ristretto di elementi: <a>, <area>, <button>, <input>, <label>, <legend> e <textarea>.

In HTML5, accesskey è un attributo globale, quindi può essere impostato su qualsiasi elemento. Tieni presente che applicarlo a un elemento non interattivo (come un <div> o un <p>) sposta solo il focus della tastiera su quell'elemento — senza eseguire un clic — quindi è più utile sui controlli interattivi.

Sintassi

<tag accesskey="single_character">...</tag>

Ad esempio, <button accesskey="s">Save</button> assegna il tasto s.

Come viene attivata la scorciatoia

Non esiste una combinazione di tasti standardizzata per gli accesskey — dipende dal browser e dal sistema operativo. L'utente tiene premuti i tasti modificatori indicati di seguito e preme il carattere assegnato:

Quando più elementi condividono lo stesso accesskey, i browser moderni in genere spostano ciclicamente il focus tra quegli elementi a ogni pressione ripetuta, anziché attivarne uno solo.

Quando accesskey è (e non è) una buona scelta

accesskey è più adatto ad ambienti controllati e monoscopo in cui si conosce il browser e il pubblico, e dove una scorciatoia documentata aggiunge un reale valore:

• Strumenti interni / intranet in cui gli utenti esperti ripetono le stesse azioni tutto il giorno (ad es. "Alt+S per salvare un record").
• Chioschi e app integrate che eseguono un browser noto, dove si controlla l'intero ambiente della tastiera.
• Utilità a pagina singola con una manciata di scorciatoie ben pubblicizzate.

Evita accesskey su siti web e applicazioni web pubblici e multiuso, per questi motivi:

• Conflitti. Un tasto scelto potrebbe scontrarsi con una scorciatoia integrata del browser o del sistema operativo, oppure con un comando delle tecnologie assistive.
• Scopribilità. Non c'è alcuna indicazione visiva che esista una scorciatoia, quindi gli utenti raramente la trovano.
• Variazione della tastiera. Un carattere potrebbe non essere disponibile su alcuni layout di tastiera, il che costituisce un reale problema di internazionalizzazione.
• Carico cognitivo. Gli accesskey numerici (1, 2, 3) non hanno alcun significato e possono confondere gli utenti con disabilità cognitive.
• Gestione del focus. Le scorciatoie sovrapposte possono interferire con il comportamento naturale di tabindex e dell'ordine di tabulazione della pagina.

Considerazioni sull'accessibilità

Le scorciatoie a carattere singolo sono disciplinate dal WCAG 2.1 Criterio di Successo 2.1.4 — Character Key Shortcuts. Il problema è che una scorciatoia associata a un singolo carattere può essere attivata accidentalmente — in modo particolarmente critico dagli utenti di screen reader e di input vocale, i cui strumenti generano sequenze di tasti durante la navigazione. Un'attivazione inaspettata di un accesskey può spostare il focus, inviare un modulo o avviare un'azione che l'utente non ha mai inteso.

Per soddisfare il SC 2.1.4, devi permettere agli utenti di disattivare la scorciatoia, rimapparla o fare in modo che sia attiva solo quando il componente rilevante ha il focus.

Poiché accesskey non ha alcuna affordance visibile, comunica la scorciatoia alle tecnologie assistive tramite l'attributo aria-keyshortcuts. Documenta la combinazione di tasti per gli screen reader senza modificarne il comportamento:

<button accesskey="s" aria-keyshortcuts="Alt+S">Save</button>

Esempio su un pulsante e un input

accesskey è più giustificabile sui controlli di form interattivi, dove mettere a fuoco l'elemento è esattamente ciò che l'utente desidera:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form>
      <label for="search" accesskey="f">Search (Alt+F):</label>
      <input id="search" type="text" accesskey="f" />
      <br />
      <button type="submit" accesskey="s" aria-keyshortcuts="Alt+S">
        Save
      </button>
    </form>
    <p>Press the modifier keys for your browser plus the letter, e.g. <strong>Alt + F</strong> to focus the search field or <strong>Alt + S</strong> to reach Save.</p>
  </body>
</html>

Esempio sui link

Lo stesso attributo può assegnare scorciatoie ai link di navigazione:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <a href="https://www.w3docs.com/learn-html.html" accesskey="h">HTML online tutorial</a>
    <br />
    <a href="https://www.w3docs.com/learn-css.html" accesskey="c">CSS online tutorial</a>
    <br />
    <a href="https://www.w3docs.com/learn-git.html" accesskey="g">GIT online tutorial</a>
  </body>
</html>

Attributi correlati

• Attributi globali HTML
• Attributo id HTML
• Attributo class HTML
• Riferimento attributi HTML

Esercitati