Lección 3 de 7 · 12 min
Probar con teclado
Al terminar sabrás
12 min- Recorrer un flujo completo solo con teclado
- Encontrar foco invisible, orden ilógico, trampas de foco y foco tapado
- Verificar el tamaño de los objetivos táctiles
Construyes: El resultado de la prueba de teclado de uno de tus flujos críticos, con cada problema y su criterio WCAG.
La prueba más barata que existe
No necesita herramientas: deja el mouse a un lado y usa el producto solo con el teclado. En pocos minutos aparecen problemas que afectan a cualquiera que no puede usar el mouse, y a quienes usan lectores de pantalla, que también se mueven con el teclado.
Las teclas que necesitas:
| Tecla | Para qué |
|---|---|
| Tab | Avanzar al siguiente elemento con el que se puede interactuar |
| Shift + Tab | Retroceder |
| Enter | Activar un enlace o un botón |
| Espacio | Activar un botón, marcar una casilla |
| Flechas | Moverse dentro de menús, pestañas, grupos de opciones |
| Esc | Cerrar un modal o un menú |
Qué buscar
1. ¿Se ve dónde está el foco? Cada elemento que recibe el foco tiene que mostrarlo claramente. Si avanzas con Tab y no sabes dónde estás, falla 2.4.7 Foco visible. Es el problema más común, y suele venir de un estilo que quitó el contorno "porque se veía feo".
2. ¿El orden tiene sentido? El foco tiene que avanzar en un orden lógico, normalmente el de lectura. Si salta del encabezado al pie y vuelve al medio, falla 2.4.3 Orden del foco.
3. ¿Se puede hacer todo? Menús, pestañas, carruseles, selectores de fecha, botones hechos a medida: todo tiene que funcionar con teclado (2.1.1 Teclado). Un menú que solo se despliega al pasar el mouse es el ejemplo clásico.
4. ¿Hay trampas? Un componente del que no se puede salir con el teclado es una trampa de foco (2.1.2). Lo inverso también es un problema: un modal abierto que deja que el foco se escape a la página de atrás.
5. ¿El foco queda tapado? Un encabezado fijo, un banner de cookies o un chat flotante pueden tapar el elemento con foco. Desde WCAG 2.2, eso falla 2.4.11 Foco no tapado.
Los modales, en detalle
Los modales concentran muchos bugs de teclado. Lo que se espera:
- al abrirlo, el foco entra al modal;
- mientras está abierto, Tab recorre solo lo que está dentro;
- Esc lo cierra;
- al cerrarlo, el foco vuelve al elemento que lo abrió.
Si falla el punto 4, la persona queda al principio de la página y tiene que recorrerla de nuevo para volver a donde estaba.
Objetivos táctiles
Aunque no es estrictamente de teclado, se revisa en la misma pasada: en celular, los botones y enlaces tienen que medir al menos 24 por 24 píxeles CSS (criterio AA 2.5.8 de WCAG 2.2). Un ícono de 16 píxeles para cerrar un modal es difícil de tocar para cualquiera, y imposible para alguien con temblor en las manos. Muchos equipos usan 44 por 44 como regla propia.
Cómo reportarlo
Cada problema con: el paso donde ocurre, qué tecla se presionó, qué pasó, qué debería pasar y el criterio WCAG. "El menú Productos no se abre con Enter ni con Espacio (2.1.1 Teclado, nivel A)" se discute en dos minutos. "El menú no es accesible" se discute una tarde.
Compruébalo
0/3Responde sin mirar atrás. Verás la explicación al instante.
1. Abres un modal con teclado y, al presionar Tab, el foco sigue recorriendo la página de atrás. ¿Qué problema es?
2. ¿Qué pide el criterio 2.4.11 Focus Not Obscured (Minimum)?
3. ¿Cuál es la forma más simple de detectar un menú que solo funciona con mouse?
Reto: la prueba de teclado de un flujo crítico
Recorre uno de tus tres flujos críticos solo con teclado. Anota cada problema con el paso, lo que pasó y el criterio WCAG.
Repite la prueba con el zoom del navegador al 200%.