Utilizzare l'attributo accesskey in HTML

di Morgan Pizzini,

L'attributo accesskey è una funzionalità spesso trascurata dell'HTML, ma può migliorare notevolmente l'accessibilità e la velocità di navigazione all'interno di una pagina web. Nel dettaglio ci permette di impostare tasti di scelta rapida a elementi interattivi per accedere rapidamente a link, pulsanti e form senza l'utilizzo del mouse.

Anche se può sembrare superfluo per una navigazione classica, ci permette di velocizzare tutte le azioni ripetitive, come l'inserimento di prodotti in un e-commerce o B2B: una serie di operazioni che vanno eseguite per ogni singolo oggetto.

<button accesskey="s">Salva</button>

Una volta assegnato un singolo carattere, premendo una combinazione di tasti (Alt + S su Windows, Ctrl + Opt + S su macOS), l'utente può attivare il pulsante "Salva" senza doverlo cliccare manualmente. Allo stesso modo facciamo un esempio con una form

<label for="name">Nome (A)</label>
<input type="text" id="name" accesskey="a">

Benche le possibilità siano illimitate, a patto che vi sia un carattere univoco per ogni elemento, è importante seguire alcune linee guida per garantire una buona esperienza utente.

  • Evitare conflitti con le scorciatoie di sistema
  • Utilizzare lettere intuitive (S per "Salva", H per "Home")
  • Indicare le scorciatoie nell'interfaccia dichiaratamente o tramite un tooltip

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

Nessuna risorsa collegata

I più letti di oggi