Atributo accesskey de HTML

El atributo accesskey de HTML es un atributo global que define un atajo de teclado para activar o enfocar un elemento específico. Cuando el usuario pulsa la(s) tecla(s) modificadora(s) del navegador junto con el carácter asignado, ese elemento recibe el foco (y, en el caso de enlaces y botones, también se activa). El valor del atributo debe consistir en uno o más caracteres imprimibles separados por espacios — el navegador utiliza el primero que pueda admitir.

En HTML 4.01, accesskey solo podía usarse con un pequeño conjunto de elementos: <a>, <area>, <button>, <input>, <label>, <legend> y <textarea>.

En HTML5, accesskey es un atributo global, por lo que puede establecerse en cualquier elemento. Ten en cuenta que aplicarlo a un elemento no interactivo (como un <div> o un <p>) solo mueve el foco del teclado a ese elemento — no realiza un clic — por lo que resulta más útil en controles interactivos.

Sintaxis

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

Por ejemplo, <button accesskey="s">Save</button> asigna la tecla s.

Cómo se activa el atajo

No existe una combinación de teclas estandarizada para los accesskeys — depende del navegador y del sistema operativo. El usuario mantiene pulsadas las teclas modificadoras indicadas a continuación y presiona el carácter asignado:

Cuando más de un elemento comparte el mismo accesskey, los navegadores modernos generalmente ciclan el foco entre esos elementos al pulsar repetidamente, en lugar de activar solo uno.

Cuándo accesskey es (y no es) una buena opción

accesskey está pensado principalmente para entornos controlados de propósito específico donde conoces el navegador y el público, y donde un atajo documentado aporta valor real:

• Herramientas internas / de intranet donde los usuarios avanzados repiten las mismas acciones todo el día (p. ej., "Alt+S para guardar un registro").
• Quioscos y aplicaciones embebidas que ejecutan un navegador conocido, donde controlas completamente el entorno de teclado.
• Utilidades de una sola página con un puñado de atajos bien documentados.

Evita accesskey en sitios web y aplicaciones web públicas de múltiples propósitos, por estas razones:

• Colisiones. Una tecla elegida puede entrar en conflicto con un atajo integrado del navegador o del sistema operativo, o con un comando de tecnología de asistencia.
• Descubribilidad. No hay ninguna indicación visual de que existe un atajo, por lo que los usuarios raramente los encuentran.
• Variación de teclado. Un carácter puede no estar disponible en algunas distribuciones de teclado, lo cual es un problema real de internacionalización.
• Carga cognitiva. Los accesskeys numéricos (1, 2, 3) no tienen ningún significado y pueden confundir a usuarios con discapacidades cognitivas.
• Gestión del foco. Los atajos superpuestos pueden interferir con el comportamiento natural de tabindex y el orden de tabulación de la página.

Consideraciones de accesibilidad

Los atajos de un solo carácter están regulados por el Criterio de Éxito 2.1.4 de WCAG 2.1 — Atajos de Teclas de Caracteres. La preocupación es que un atajo vinculado a un solo carácter puede activarse de forma accidental — especialmente por usuarios de lectores de pantalla y entrada de voz, cuyas herramientas generan pulsaciones de teclas mientras navegan. Una activación inesperada de accesskey puede mover el foco, enviar un formulario o desencadenar una acción que el usuario nunca pretendió.

Para cumplir con el SC 2.1.4, debes permitir que los usuarios desactiven el atajo, lo reasignen, o que solo esté activo cuando el componente relevante tenga el foco.

Dado que accesskey no tiene una indicación visual, expón el atajo a la tecnología de asistencia mediante el atributo aria-keyshortcuts. Este documenta la combinación de teclas para los lectores de pantalla sin cambiar el comportamiento:

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

Ejemplo con un botón y un input

accesskey resulta más justificable en controles de formulario interactivos, donde enfocar el elemento es exactamente lo que el usuario desea:

<!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>

Ejemplo con enlaces

El mismo atributo puede asignar atajos a enlaces de navegación:

<!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>

Atributos relacionados

• Atributos Globales de HTML
• Atributo id de HTML
• Atributo class de HTML
• Referencia de Atributos HTML

Práctica