Test de operabilidad por teclado
Descripción general
El test Keyboard Operable verifica si todos los elementos interactivos de una página web pueden activarse utilizando un teclado, sin necesidad de usar un mouse u otro dispositivo apuntador. Este test ayuda a detectar violaciones del criterio de éxito WCAG 2.1 Success Criterion 2.1.1 Keyboard (Nivel A).
Las personas que dependen del teclado, dispositivos de acceso por interruptores u otras tecnologías de asistencia deben poder interactuar con todos los botones, enlaces, menús y controles de una página. Si un elemento solo responde a clics del mouse pero ignora la entrada desde el teclado, se crea una barrera significativa de accesibilidad para estos usuarios.
Qué verifica el test
El test se enfoca en elementos interactivos, es decir, elementos que se espera que el usuario active o utilice, tales como:
- Botones
- Checkboxes y radio buttons
- Menús desplegables (
<select>) - Paneles de pestañas y controles tipo acordeón
- Cualquier elemento con un manejador de clic que abra algo (modales, tooltips, menús, selectores de archivos, etc.)
Para cada elemento, el test verifica que presionar la tecla de teclado esperada — Enter, Space o Arrow keys — produzca el mismo resultado que hacer clic con el mouse.
Cómo funciona el test — Paso a paso
Paso 1 — Pausar animaciones
Antes de que comience la prueba, la herramienta pausa todas las animaciones CSS en la página. Esto asegura que las transiciones visuales no interfieran con la detección de si un elemento realmente respondió a la entrada del teclado.
Paso 2 — Descubrir elementos interactivos
El test analiza la página (o una sección específica que definas) y recopila todos los elementos interactivos. Cada elemento se identifica por su etiqueta, rol ARIA y otros atributos para poder ser evaluado individualmente.
Paso 3 — Probar cada elemento
Para cada elemento interactivo encontrado, el test:
- Enfoca el elemento utilizando el teclado (navegación con Tab).
- Presiona la(s) tecla(s) esperada(s) — por ejemplo:
- Un
<button>→ Enter y Space - Un checkbox → Space
- Un desplegable
<select>→ Space y luego Arrow Down - Un panel de pestañas → Enter y Space
- Un
- Observa si ocurrió algún cambio en la página — por ejemplo:
- Cambió un atributo ARIA (por ejemplo
aria-expandedpasó defalseatrue) - Apareció un menú, modal o panel
- Cambió una clase o estilo en el elemento (indicando que reaccionó)
- Se abrió un selector de archivos o un diálogo
- Cambió un atributo ARIA (por ejemplo
- Si el teclado no produce ningún cambio, el test intenta hacer clic en el elemento con el mouse para confirmar que el elemento sí es funcional — pero que simplemente no funciona con teclado.
- Reporta un issue si el elemento responde al mouse pero no al teclado.
Paso 4 — Restaurar el estado de la página
Después de probar cada elemento, la herramienta cierra automáticamente cualquier menú, modal o ventana emergente que se haya abierto durante la prueba. Esto evita interferencias con el siguiente elemento que será evaluado.
Paso 5 — Reportar resultados
Al final, el test resume cuántos elementos fueron evaluados, cuántos se omitieron (formularios, enlaces simples y otros elementos que se excluyen intencionalmente) y cuántos problemas de accesibilidad se encontraron.
Qué se omite (y por qué)
El test omite inteligentemente ciertos elementos para evitar falsos positivos y prevenir acciones no deseadas:
| Tipo de elemento | Por qué se omite |
|---|---|
Enlaces simples (<a href="...">) | Navegar fuera de la página es un comportamiento esperado |
Campos de formulario (<input>, <textarea>) | Presionar Enter podría enviar el formulario |
| Botones de envío (submit) | El formulario se enviaría y la página cambiaría |
| Pestañas ya seleccionadas | No se espera ningún cambio al seleccionar algo que ya está activo |
| Elementos visualmente ocultos | No son visibles para los usuarios |
| Elementos sin operación de teclado definida | Si no existe interacción estándar con teclado, el elemento no se evalúa |
Errores comunes y malentendidos
"El test reportó un issue, pero puedo operar el elemento con teclado."
Qué revisar:
El elemento puede utilizar una interacción de teclado no estándar. Por ejemplo, un widget personalizado que requiere Arrow keys en lugar de Enter o Space puede no coincidir con el patrón de teclas esperado. Esto también puede ser un problema de accesibilidad si no sigue las convenciones ARIA de interacción con teclado.
Asegúrate de que el elemento tenga el atributo ARIA role correcto para que la herramienta sepa qué teclas esperar.
"Un <select> fue marcado como no operable con teclado."
Qué revisar:
Algunos reemplazos personalizados de <select> parecen desplegables, pero en realidad están construidos con elementos <div> o <ul> y pueden no manejar correctamente los eventos de teclado.
Los elementos <select> nativos siempre deberían ser operables con teclado. Si se utiliza un reemplazo personalizado, verifica que implemente soporte completo para teclado.
"El nombre o etiqueta del elemento aparece vacío o incorrecto en el reporte."
Qué revisar:
El elemento puede no tener un nombre accesible (por ejemplo falta aria-label, texto visible o alt en imágenes). Aunque esto se muestra dentro del contexto del test Keyboard Operable, en realidad corresponde principalmente a un issue de accesibilidad relacionado con Labels/Names.
"El test se agotó por tiempo en una página específica."
Qué revisar:
Algunas páginas con frameworks JavaScript pesados (por ejemplo aplicaciones complejas en React tipo SPA) pueden tardar más tiempo en estabilizarse. Intenta ejecutar el test nuevamente.
Si el problema persiste, considera limitar el test a un contenedor específico de la página en lugar de analizar la página completa.
Referencia WCAG
Este test evalúa el siguiente criterio de éxito de WCAG 2.1:
| Criterio | Nivel | Descripción |
|---|---|---|
| 2.1.1 Keyboard | A (Requerido) | Toda la funcionalidad del contenido debe ser operable mediante una interfaz de teclado sin requerir tiempos específicos para cada pulsación de tecla. |
No cumplir este criterio significa que los usuarios que no pueden utilizar un mouse — incluidas personas con discapacidades motoras que dependen de la navegación únicamente con teclado — no podrán utilizar el contenido interactivo.
Tests relacionados
El test Keyboard Operable forma parte del conjunto de tests de Keyboard Navigation, que también incluye:
- Focus Order — verifica que el orden de navegación con teclado siga una secuencia lógica
- Focus Visible — verifica que el elemento enfocado tenga una indicación visual clara
- Focus Lost — verifica que el foco nunca se pierda inesperadamente después de una interacción
- Navigation — verifica los patrones de navegación en widgets (menús, carruseles, etc.)
Ejecutar el conjunto completo de Keyboard Navigation proporciona una cobertura completa de accesibilidad para navegación con teclado.