TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
El atributo HTML accesskey permite a las personas usuarias disparar acciones presionando una tecla (ej: ALT + S para Guardar). Si copias y pegas un botón y olvidas cambiar la letra asignada, crearás un conflicto en el navegador. Presionar el atajo tendrá resultados impredecibles (WCAG 2.1.4).
La colisión silenciosa en el DOM
Los atajos de teclado personalizados son armas de doble filo. Son útiles para personas usuarias avanzados y personas con discapacidad motriz, pero compiten directamente con los atajos propios del navegador y del lector de pantalla. Si a esto le sumas una duplicidad interna en tu código, la persona usuaria presionará el atajo para "Buscar" y el foco saltará inexplicablemente al botón de "Salir".
El patrón erróneo: Código Accesible Deficiente
Asignación perezosa de la misma tecla a funciones diametralmente opuestas en la misma vista.
<!-- MAL: Conflicto de teclas garantizado -->
<button accesskey="s" onclick="save()">Guardar (S)</button>
<button accesskey="s" onclick="search()">Buscar (S)</button>La Solución Accesible: Código Recomendado
Garantizar unicidad estricta en toda la página y, preferiblemente, evitar teclas de un solo carácter que colisionen con comandos del sistema (como 'h' para encabezados en lectores de pantalla).
<!-- BIEN: Teclas únicas y claramente documentadas en la UI -->
<button accesskey="g" onclick="save()">Guardar (ALT + G)</button>
<button accesskey="b" onclick="search()">Buscar (ALT + B)</button>Metodología de Verificación y Testing
Pruebas Manuales con Lectores de Pantalla
Desactivar el ratón y navegar la página exclusivamente con Tab, Shift+Tab, Enter y las teclas de flecha. Verificar que todos los elementos interactivos sean alcanzables, que el indicador de foco sea visible, y que no existan trampas de foco donde el cursor quede atrapado.
Inspección del Árbol de Accesibilidad
En Chrome DevTools, seleccionar el elemento afectado en el panel Elements, luego abrir la pestaña Accessibility. Verificar que las propiedades Role, Name y State reflejen correctamente la intención del componente según el criterio WCAG 2.1.4.
Herramientas Automatizadas
Ejecutar Axe DevTools o WAVE sobre la vista afectada. Buscar violaciones relacionadas con el criterio WCAG 2.1.4. Complementar con una auditoría manual para los aspectos que las herramientas automatizadas no pueden verificar (interacción dinámica, calidad del contenido).
