El valor del atributo accesskey debe ser único

El atributo accesskey proporciona un atajo de teclado que permite a los usuarios activar rápidamente o mover el foco a un elemento específico, típicamente presionando la tecla designada en combinación con una tecla modificadora (como Alt en Windows o Control + Option en macOS). Cuando múltiples elementos comparten el mismo valor de accesskey, los navegadores manejan el conflicto de manera inconsistente: algunos enfocarán el primer elemento coincidente, otros ciclarán entre las coincidencias, y algunos pueden ignorar completamente los duplicados. Esta impredecibilidad socava el propósito de las teclas de acceso y crea una experiencia confusa.

Este problema afecta principalmente a usuarios que dependen del teclado para navegar, incluyendo personas ciegas que usan lectores de pantalla, usuarios con baja visión que no pueden seguir fácilmente un puntero del ratón, y usuarios con discapacidades motoras que dependen de teclados o dispositivos de entrada que emulan teclados. Para estos usuarios, una tecla de acceso duplicada puede significar que nunca puedan alcanzar el elemento deseado, o que lleguen al elemento incorrecto sin darse cuenta.

Esta regla se clasifica como una Mejor Práctica de Deque. Aunque no se corresponde directamente con un criterio de éxito específico de WCAG, apoya los principios más amplios detrás de WCAG 2.1.1 Teclado (toda funcionalidad debe ser operable mediante teclado) y WCAG 4.1.2 Nombre, Función, Valor (los componentes de la interfaz de usuario deben comportarse de manera predecible). Las teclas de acceso duplicadas socavan la operabilidad del teclado al introducir atajos poco fiables.

Cómo solucionarlo

1. Encuentra todos los elementos en la página que usen el atributo accesskey.
2. Identifica duplicados: cualquier valor de accesskey que aparezca en más de un elemento.
3. Asigna un valor único a cada elemento para que ninguno comparta la misma tecla.
4. Evita conflictos con atajos predeterminados del navegador y lector de pantalla. Por ejemplo, muchos navegadores reservan Alt + D para la barra de direcciones y Alt + F para el menú Archivo.

Una nota de precaución sobre accesskey

Aunque arreglar duplicados es importante, ten en cuenta que el atributo accesskey tiene limitaciones significativas en la práctica:

• Soporte inconsistente del navegador: No todos los navegadores implementan las teclas de acceso de la misma manera, y las combinaciones de teclas modificadoras varían entre sistemas operativos.
• Riesgo de conflicto: Las teclas de acceso definidas por desarrolladores pueden anular atajos predeterminados del navegador o tecnología asistiva, potencialmente rompiendo la funcionalidad esperada.
• Capacidad de descubrimiento: Las teclas de acceso son invisibles para la mayoría de usuarios a menos que estén explícitamente documentadas en la página.
• Problemas de localización: Una tecla que tiene sentido como mnemónico en un idioma (p. ej., s para “Search”) puede no funcionar en otro.

Por estas razones, muchos expertos en accesibilidad recomiendan evitar accesskey por completo y en su lugar confiar en encabezados bien estructurados, puntos de referencia y enlaces de salto para una navegación eficiente por teclado.

Ejemplos

Incorrecto: valores duplicados de accesskey

Ambos enlaces usan accesskey="g", por lo que el navegador no puede determinar qué elemento activar.

<a href="https://google.com" accesskey="g">Link to Google</a>
<a href="https://github.com" accesskey="g">Link to GitHub</a>

Correcto: valores únicos de accesskey

Cada enlace tiene un valor distinto de accesskey, por lo que los atajos de teclado funcionan como se espera.

<a href="https://google.com" accesskey="g">Link to Google</a>
<a href="https://github.com" accesskey="h">Link to GitHub</a>

Correcto: eliminar accesskey en favor de mejores patrones

Si las teclas de acceso no son esenciales, considera eliminarlas y proporcionar una estructura de navegación clara en su lugar.

<nav aria-label="Main navigation">
  <a href="https://google.com">Link to Google</a>
  <a href="https://github.com">Link to GitHub</a>
</nav>

Learn more:

Deque Reference

Deque University - How To Fix

→