Realizzare shortcut con le Access Key

Corso online Responsive Design
Realizzare siti responsivi con HTML5 e CSS3.

Scritto da Luca Ruggiero nella sezione Html

Le chiavi di accesso sono rappresentate dall'attributo accesskey del Tag <a>, il loro utilizzo è relativo alla realizzazione di link utilizzabili con la tastiera oltre che tradizionalmente col mouse, ovvero un sistema di navigazione all'interno delle pagine Web simile agli shortcut (tasti scorciatoia) di Windows.

Potete notare che l'interfaccia del vostro browser, ad esempio, utilizza dei menu per mettere a disposizione degli strumenti, ovvero una cosa del genere:

File | Modifica | Visualizza | Preferiti | Strumenti | ?

Provate a cliccare su una delle lettere sottolineate mantenendo premuto il tasto Alt, la combinazione Alt + F permetterà di aprire il menu "File".

Allo stesso modo, andiamo a realizzare un menu, o più semplicemente una serie di link, per permettere al navigatore di avere più libertà nella scelta dei propri strumenti di navigazione, ed ai portatori di handicap fisici di visitare comodamente le nostre pagine, la sintassi per la realizzazione di un link è la seguente:

<a href="index.htm" accesskey="h">Homepage</a>
Questo link permette, indicando la lettera associata, di tornare alla homepage utilizzando la combinazione Alt + H per mettere il focus sul link ed [Invio] per concretizzare il link, per tanto sconsiglio in questo caso l'utilizzo di tecniche per eliminare il bordo tratteggiato ai link, dato che quello è il focus.

Un consiglio che do è quello di sottolineare la lettera associata alla chiave di accesso per evidenziare la funzionalità, quindi scriveremo ad esempio:
<a href="index.htm" accesskey="h"><u>H</u>omepage</a>
Ecco un esempio: Homepage

Ricapitolando, con Microsoft Internet Explorer la combinazione da utilizzare è Alt + H +[Invio], mentre con Mozzilla e Netscape Navigator è sufficiente la combinazione Alt + H.

I più cliccati della sezione Html

:: Impedire ad un testo di andare a capo in Html (32.978)

:: Le tabelle Html (31.000)

:: Formattazione del testo in Html (25.041)

:: Referenze dei Tag Html (18.963)

:: Creare tabelle con i bordi curvi (17.800)

:: Guida XHTML (16.237)

:: Struttura di un file Html (14.800)

:: Inserire un'icona nella barra degli indirizzi di MSIE (13.524)

:: Inserire le immagini in una pagina Html (10.901)

:: Sovrapporre un'immagine ad un layer senza posizionamento assoluto (10.705)

IN EVIDENZA
DOWNLOAD