Atajos de teclado en HTML

Quizás sea una cosa que no se ve mucho por las páginas web, pero que es una capacidad del lenguaje, es el poder crear atajos de teclado en HTML. Es decir, que una combinación de teclas en una página web concreta produzca un efecto que nos permita realizar una acción sobre una página. En concreto, la idea es poder asociar el atajo de teclado a un enlace, de tal manera que cuando pulsemos el atajo de teclado se lance dicho enlace.

Pero vamos por partes, lo primero es saber que el atributo global accesskey es aquel que nos permite indicar cuál es la tecla que actúa de atajo de teclado en la página. Este atributo accesskey se lo podemos asignar a elementos como enlaces anchor, area, textarea, input, label,… el valor que recibe dicho atributo es el carácter de la tecla que hará de atajo de teclado.

De esta forma, si se lo queremos asignar a unos enlaces mediante su elemento a, haremos lo siguiente:

<a href="http://www.manualweb.net/html" accesskey="h">Manual HTML</a> (Atajo "h")<br/>
<a href="http://www.manualweb.net/java" accesskey="j">Manual Java</a> (Atajo "j")<br/>
<a href="http://www.manualweb.net/mongodb" accesskey="m">Manual MongoDB</a> (Atajo "m")

Lo que hemos conseguido es que cuando pulsemos el atajo de teclado más la tecla h iremos al Manual de HTML, cuando pulsemos el atajo de teclado más la tecla a iremos al Manual Java y, finalmente, cuando pulsemos el atajo de teclado más la tecla m iremos al Manual de MongoDB.

Hasta aquí hemos leído en varias ocasiones «atajo de teclado», pero, ¿qué teclas hacen de atajo de teclado? Pues aquí no hay estándar y dependen de cada navegador web y de cada sistema operativo. Así que deberás de revisar cuál es para el navegador que utilices. Aquí te dejamos una tabla de referencia para los más utilizados:

De hecho, en esta propia página hemos gestionado los atajos de teclado del ejemplo y puedes probarlos ahora mismo. Si estás en un Google Chrome verás que como pulsando Alt+h o Control+Alt+h irás al Manual de HTML.

Cómo se puede comprobar, de esta forma tan sencilla podemos implementar los atajos de teclado en HTML.

Publicaciones relacionadas:

Abrir enlace sobre varios frames Ir al principio y al final de una página web Abrir enlace en una nueva ventana Enlace a una parte concreta de la página Deshabilitar teléfonos para iOS