Accesibilidad con teclado: cómo navegar una web solo con Tab (y cómo probarla)

La accesibilidad con teclado es la prueba del algodón: si tu web se puede usar sin ratón, normalmente también es más clara, más rápida y más amable para todo el mundo. Y no, no hace falta ser dev: con Tab, Enter y Esc ya puedes detectar el 80% de los problemas.

Qué significa “accesible por teclado” (en cristiano)

Una web es accesible por teclado cuando puedes:

• Llegar a todo lo importante (menú, buscador, botones, formularios) con Tab/Shift+Tab.
• Saber dónde estás porque el foco se ve (un borde, un subrayado, un cambio claro).
• Activar cosas con Enter o Espacio.
• Salir de modales/popup con Esc (y no quedarte “atrapado”).

Si alguna de estas falla, no es “una manía”: es un bloqueo real para personas que navegan sin ratón (por movilidad, por vista, por fatiga, por lesiones… o porque van a toda velocidad con teclado).

Las teclas básicas para moverte por cualquier web

Tecla	Qué hace	Dónde se nota
Tab	Va al siguiente elemento interactivo.	Menús, enlaces, botones, inputs.
Shift + Tab	Vuelve al elemento anterior.	Para “deshacerte” cuando te pasas.
Enter	Activa enlaces y muchos controles.	Abrir/cerrar, enviar, entrar.
Espacio	Activa checks, botones y controles en muchos sitios.	Checkboxes, toggles, sliders.
↑↓←→	Navegan dentro de menús/listas.	Selects, menús desplegables, carruseles bien hechos.
Esc	Cierra modales/menús o “sale” de un modo.	Pop-ups, menús móviles, overlays.

Si quieres profundizar tecla a tecla: Tab, Enter, Esc y Shift.

Checklist de accesibilidad por teclado en 10 minutos (sin herramientas raras)

Abre tu web (o la que quieras “auditar”) y haz esto:

1. No toques el ratón. En serio. Suéltalo.
2. Pulsa Tab una vez. ¿Ves el foco? Si no se ve claramente, mal asunto.
3. Sigue con Tab:
   • ¿Puedes llegar al menú, buscador, botones CTA y links importantes?
   • ¿El orden tiene sentido o vas saltando como una cabra (pie de página → header → mitad)?
4. Cuando estés sobre un enlace/botón, prueba Enter. ¿Se activa?
5. Si hay checkbox/toggle, prueba Espacio. ¿Cambia de estado?
6. Abre un menú desplegable (si hay). Prueba ↑/↓ y luego Enter.
7. Si aparece un modal/popup:
   • ¿Puedes llegar al botón de cerrar con Tab?
   • ¿Cierra con Esc?
   • Al cerrar, ¿vuelves al sitio donde estabas o te manda al inicio?
8. En formularios:
   • ¿Puedes tabular campo por campo sin quedarte atrapado?
   • Si hay error, ¿lo entiendes sin mirar “a ojo” (mensaje claro)?

Señal de alarma inmediata: si hay un punto donde Tab “desaparece” (no sabes dónde estás), o entras en un elemento y ya no puedes salir, ahí hay un fallo real.

Los 7 fallos típicos (los que más rompen la navegación)

• Foco invisible: estás tabulando, pero no se ve nada. Resultado: navegación a ciegas.
• Orden de tabulación absurdo: la página “salta” sin lógica y te obliga a recorrer 50 cosas antes de llegar al CTA.
• Menú que no se puede abrir con teclado: si solo funciona con hover/ratón, estás fuera.
• Modal que atrapa: entras y no puedes volver (o el foco se pierde).
• Botones que no son botones: cosas clicables hechas “a mano” que no responden a Enter/Espacio.
• Formularios sin pista: no sabes qué campo falló ni cómo corregirlo.
• “Te lo cierro, pero te mando al principio”: cierras un popup y el foco no vuelve a donde estabas.

Bonus: productividad real (trabajar sin ratón)

La gracia es que esto no solo es accesibilidad: también es velocidad. Si quieres entrenar el modo “no ratón” en Windows, tienes esta guía: atajos Windows para multitarea sin ratón.

Y para construir base de atajos, empieza por aquí: atajos y teclas rápidas. El combo Ctrl también es tu amigo para moverte más rápido.

Si algo “te funciona raro”, revisa esto antes de culpar a la web

• Teclas pegajosas: a veces te lían con Shift / combos. Guía rápida: desactivar teclas pegajosas.
• Extensiones del navegador: algunas capturan atajos y rompen comportamientos.
• Idioma/atajos del sistema: si tienes combos raros, revisa configuración del teclado.

Conclusión

La accesibilidad por teclado no es “un extra bonito”: es usabilidad pura. Si tu web pasa la prueba de Tab (foco visible, orden lógico, activación con Enter/Espacio, salida con Esc), estás construyendo una experiencia más sólida para todos.

Preguntas frecuentes

¿Qué es el “foco” del teclado?

Es el indicador que te dice qué elemento está “seleccionado” mientras navegas con Tab. Debe verse claro para no navegar a ciegas.

¿Por qué Enter a veces no funciona y sí Espacio?

Depende del tipo de control. En muchos casos Enter activa enlaces y Espacio cambia el estado de checks/toggles o activa botones según implementación.

¿Cómo sé si mi web “atrapa” el teclado?

Si al entrar en un menú/modal ya no puedes volver con Shift+Tab o cerrar con Esc, hay un problema de navegación.

¿Qué es un “orden de tabulación” correcto?

Que al tabular sigas un recorrido lógico: de arriba abajo y de izquierda a derecha (más o menos), llegando antes a lo importante sin saltos absurdos.

¿Esto sirve también para apps, no solo webs?

Sí. El patrón es el mismo: foco visible, navegación con Tab/Shift+Tab, activación con Enter/Espacio y salida con Esc.

También te puede interesar: