Los atajos de teclado son una herramienta útil para mejorar la navegación y accesibilidad de una web. Sin embargo, si un sitio implementa atajos de una sola tecla sin permitir desactivarlos o reasignarlos, esto puede afectar la experiencia de usuarios con discapacidades.
Por ejemplo, una persona que usa software de reconocimiento de voz podría activar accidentalmente atajos al hablar, mientras que un usuario con discapacidad motriz podría presionar teclas involuntariamente.
Este problema incumple el Criterio de Conformidad 2.1.4 de WCAG 2.1, que requiere que los atajos de una sola tecla puedan desactivarse o modificarse para evitar interferencias no deseadas.
Acerca de este fallo
Este fallo ocurre cuando una página web asigna funciones a teclas individuales (como «S» para abrir una barra de búsqueda o «D» para eliminar elementos), sin proporcionar una opción para desactivar o modificar el comportamiento de estos atajos.
Impacto en la accesibilidad:
- Usuarios con discapacidad motriz pueden activar atajos sin querer, afectando su interacción con la web.
- Usuarios de reconocimiento de voz pueden desencadenar acciones involuntarias al hablar ciertas palabras.
- Usuarios de lectores de pantalla pueden experimentar conflictos entre atajos de la web y los de su software.
Escenarios comunes de este fallo:
- Uso de teclas individuales sin modificadores (Ctrl, Alt, Shift).
- Falta de una opción en la configuración para desactivar o reasignar atajos.
- La única forma de realizar una acción es mediante un atajo de una sola tecla.
Ejemplos
Ejemplo incorrecto 1: Atajo de búsqueda con una sola tecla
Este código activa un cuadro de búsqueda al presionar «S», sin ofrecer una alternativa de desactivación o modificación:
<script>
document.addEventListener(‘keydown’, function(event) {
if (event.key === ‘s’) {
document.getElementById(‘searchBox’).style.display = ‘block’;
}
});
</script>
<input type=»text» id=»searchBox» style=»display:none;» placeholder=»Buscar…»>
🔴 Problema:
- El atajo se activa con una sola tecla, lo que puede generar errores en la navegación.
- No hay opción para desactivar o cambiar la tecla asignada.
- Puede interferir con usuarios que intenten escribir en un campo de texto.
Solución correcta: Permitir desactivación y combinación de teclas
Este código añade una opción para que los usuarios desactiven los atajos o los utilicen con combinaciones de teclas:
<label>
<input type=»checkbox» id=»disableShortcuts»> Desactivar atajos de teclado
</label>
<script>
let shortcutsEnabled = true;
document.getElementById(‘disableShortcuts’).addEventListener(‘change’, function() {
shortcutsEnabled = !this.checked;
});
document.addEventListener(‘keydown’, function(event) {
if (!shortcutsEnabled) return;
if (event.ctrlKey && event.key === ‘s’) {
document.getElementById(‘searchBox’).style.display = ‘block’;
}
});
</script>
✅ ¿Qué mejora?:
- Agrega una opción para desactivar los atajos.
- Usa Ctrl + S en lugar de solo «S», reduciendo activaciones accidentales.
- Mejora la accesibilidad para usuarios con tecnologías de asistencia.
Ejemplo incorrecto 2: Botón de acción bloqueado por un atajo de teclado
Este código asigna el atajo de la tecla «A» para activar un botón, pero sin permitir alternativas:
<button onclick=»myFunction()» accesskey=»a»>Abrir</button>
🔴 Problema:
- No permite que el usuario reasigne la tecla.
- Puede generar interferencias con usuarios que intenten escribir en un formulario.
Solución correcta: Permitir reasignación del atajo
Este código permite usar combinaciones de teclas, reduciendo la probabilidad de activaciones accidentales:
<script>
document.addEventListener(‘keydown’, function(event) {
if (event.ctrlKey && event.key === ‘a’) {
myFunction();
}
});
</script>
✅ ¿Qué mejora?:
- Usa Ctrl + A en lugar de solo «A».
- Reduce interferencias con la escritura normal en formularios.
- Mejora la experiencia de usuarios con tecnologías de asistencia.
Errores comunes y cómo evitarlos
Errores frecuentes:
- Atajos de una sola tecla sin opción de modificación.
- Eliminar botones o enlaces y dejar solo el atajo como única forma de interacción.
- No informar a los usuarios sobre los atajos disponibles.
Cómo evitar estos errores:
- Usar combinaciones de teclas con modificadores (Ctrl, Alt, Shift).
- Permitir desactivar o reasignar atajos en la configuración del sitio.
- Incluir documentación de accesibilidad con la lista de atajos disponibles.
Preguntas frecuentes
¿Está prohibido usar atajos de una sola tecla en WCAG?
No, siempre que puedan desactivarse o modificarse.
¿Cómo afecta esto a usuarios con discapacidad?
Pueden activar acciones sin querer, dificultando la navegación.
¿Qué teclas deben evitarse en atajos de una sola tecla?
Letras, números y signos sin modificadores.
¿Cómo puedo detectar este fallo en mi web?
Verifica si hay atajos que funcionan sin teclas modificadoras y si existe una opción para desactivarlos.
¿Qué herramientas pueden ayudar?
Extensiones como Axe DevTools, WAVE, o la consola del navegador para buscar eventos keydown.
¿Afecta esto al SEO?
Sí, porque mejorar la accesibilidad mejora la usabilidad y reduce la tasa de rebote.
Recursos relacionados
- Guía oficial WCAG 2.1 para el fallo común F99: Incumplimiento del Criterio de Conformidad 2.1.4 debido a la implementación de atajos de teclas de caracteres que no se pueden desactivar ni reasignar
- Comprender el criterio de éxito 2.1.4: Atajos de teclas de caracteres
Pruebas y validación
Procedimiento
Para verificar si una web incumple el Criterio de Conformidad 2.1.4 debido al uso de atajos de teclas sin opción de desactivación ni reasignación, sigue estos pasos:
- Accede a la página web y asegúrate de que no haya ningún campo de entrada de texto en foco.
- Presiona teclas individuales (letras, números, signos de puntuación) sin usar teclas modificadoras como Ctrl, Alt o Shift.
- Observa si alguna acción se activa automáticamente (ejemplo: abrir un cuadro de búsqueda, eliminar contenido, cambiar configuraciones).
- Prueba los mismos atajos manteniendo presionada la tecla Shift para identificar si hay diferencias en el comportamiento.
- Busca en la configuración de la web si existe alguna opción para desactivar o reasignar los atajos de teclado.
- Revisa el código fuente o usa herramientas de inspección para identificar eventos
keydownque capturan una sola tecla sin modificadores.
Resultados esperados
✅ Si las pruebas confirman que:
- Todos los atajos de teclado usan combinaciones de teclas con modificadores (Ctrl, Alt, Shift).
- Existe una opción clara y accesible para desactivar o modificar los atajos.
- Ninguna acción en la web depende exclusivamente de un atajo de una sola tecla.
Entonces, el contenido cumple con WCAG 2.1 y es accesible para todos los usuarios.
❌ Si alguno de estos elementos no se cumple:
- Se activan funciones con una sola tecla sin modificadores.
- No hay opción para desactivar o reasignar los atajos en la configuración del sitio.
- Los usuarios no pueden realizar acciones sin depender de los atajos de teclado.
Entonces, el contenido falla el Criterio 2.1.4 y debe corregirse para mejorar la accesibilidad.
Los atajos de teclado pueden mejorar la accesibilidad, pero si se limitan a una sola tecla sin posibilidad de desactivación o reasignación, pueden convertirse en una barrera para muchos usuarios.
📢 ¿Necesitas hacer tu web más accesible? Contáctanos y optimiza tu sitio según WCAG 2.1.