En esta ocasión vamos a ver como puedes crear tus propios atajos de teclado en HTML con la propiedad acceskey.
Esta propiedad nos permite asignar una tecla a un elemento de html como por ejemplo, un enlace y así poder navegar mediante una combinación de teclas, atajo o hotkeys.
Crear atajos de teclado en HTML
Vamos a ver un ejemplo muy rápido y muy fácil (como siempre) para crear un atajo de teclado en un enlace. Veremos como acceder al enlace sin utilizar el ratón ¡Magia potgia!
Recuerda que la combinación de teclas para usar el atajo puede variar dependiendo del navegador que estemos utilizando.
Que es el atributo accesskey en HTML
El atributo HTML accesskey permite asignar una combinación de teclas a un elemento, que puede utilizarse para acceder a él de forma rápida y sencilla. Esto es especialmente útil para los elementos ocultos o de difícil acceso con el ratón.
El atributo accesskey puede asignarse a cualquier elemento HTML y la combinación de teclas puede consistir en cualquier carácter, excepto «ESPACIO» y «RETORNO».
El uso más común del atributo accesskey es asignarlo a los enlaces, para que el usuario pueda acceder rápidamente a ellos pulsando la combinación de teclas asignada, tal como hemos visto en el ejemplo anterior.
Ejemplos de uso de accesskey
Por ejemplo, el siguiente enlace tiene un accesskey «d»:
<a href="http://www.dropcoding.com/" accesskey="d">Web de Dropcoding</a>Cuando el usuario pulse «d» en su teclado, el enlace se activará.
El atributo accesskey también puede utilizarse para acceder a los campos de formulario y otros elementos de la página. Por ejemplo, el siguiente campo de entrada tiene una accesskey de «f»:
<input type="text" name="firstname" accesskey="f">Cuando el usuario presione «f» en su teclado, el campo de entrada se enfocará. Esto es especialmente útil para los campos de entrada que se encuentran cerca de la parte inferior de la página, o en una barra lateral.
También puede utilizar el atributo accesskey para acceder a los menús y otros elementos de navegación de la página. Por ejemplo, el siguiente menú tiene una accesskey de «m»:
<ul>
<li><a accesskey="m" href="#">Menu</a></li>
<li><a accesskey="m" href="#">Submenu</a></li>
</ul>
Cuando el usuario pulsa «m» en su teclado, el menú se activa. Esto puede ser útil para los menús que se encuentran cerca de la parte superior de la página, o en una barra lateral.
El atributo accesskey es una herramienta valiosa para mejorar la usabilidad, y puede utilizarse para que su sitio web sea más fácil de usar para todos. Asegúrese de probar su sitio web con varias combinaciones de teclas para asegurarse de que todas funcionan correctamente.
Y hasta aquí este pequeño tutorial sobre los atajos de teclado en HTML utilizando accesskey. Espero que te haya servido y si tienes alguna duda déjamelo en los comentarios.