No todo el mundo navega con ratón. Personas con discapacidades motoras, usuarios de lectores de pantalla que se mueven con Tab y Enter, gente con una lesión temporal en la mano o simplemente usuarios avanzados que prefieren no soltar el teclado dependen de que tu web funcione sin necesidad de hacer clic en nada. Si al pulsar Tab el foco se pierde, salta a sitios raros o directamente no se ve, esa parte de tu audiencia se queda fuera.
Los cuatro principios que hacen que el teclado funcione
Antes de tocar código, conviene tener claro qué se está buscando: que el foco se mueva en un orden lógico entre botones, enlaces, formularios y menús; que se vea claramente qué elemento tiene el foco en cada momento; que cualquier acción posible con el ratón también se pueda hacer con el teclado; y que el foco nunca quede atrapado en un elemento sin forma de salir de él.
Cómo implementarlo en la práctica
Usa tabindex con cabeza
El atributo tabindex define el orden en que los elementos reciben el foco al pulsar Tab. tabindex="0" incluye el elemento en el orden natural del documento, tabindex="-1" lo saca del flujo pero permite asignarle el foco desde JavaScript, y un valor positivo como tabindex="1" fuerza un orden personalizado que rompe el flujo natural. Mejor evitarlo salvo caso muy justificado.
No elimines el indicador de foco
Es tentador quitar el outline por estética, pero es justo lo que permite a un usuario de teclado saber dónde está. Se puede personalizar sin eliminarlo:
:focus {
outline: 2px solid #007BFF;
outline-offset: 2px;
}Haz operables menús y formularios
Enter o Space deben activar botones y enlaces, las flechas del teclado deben mover el foco entre elementos de un menú, y Esc debe cerrar modales o desplegables. Un ejemplo básico de navegación en menú con JavaScript:
document.addEventListener("keydown", function(event) {
if (event.key === "ArrowDown") {
// Mover el foco al siguiente elemento del menú
}
if (event.key === "ArrowUp") {
// Mover el foco al elemento anterior del menú
}
});Controla el foco en modales
Un modal debe capturar el foco al abrirse y devolverlo al elemento original al cerrarse, y siempre debe poder cerrarse con Esc:
const modal = document.getElementById("modal");
modal.addEventListener("keydown", function(event) {
if (event.key === "Escape") {
modal.close();
}
});Si trabajas con page builders como Elementor o Divi, conviene revisar específicamente cómo gestionan estos comportamientos, porque no todos los generan de forma accesible por defecto. Lo repasamos en accesibilidad en page builders: auditoría práctica de Elementor, Divi y Gutenberg.
Cómo comprobar que funciona
La prueba más rápida es literalmente recorrer tu web solo con la tecla Tab y comprobar si el orden tiene sentido y el foco se ve en todo momento. Herramientas como Axe o Lighthouse detectan buena parte de los problemas comunes de forma automatizada, pero nada sustituye a probar con usuarios reales que dependen del teclado en su día a día: son quienes detectan los fallos que ninguna herramienta automática pilla. Pensar en estos problemas desde el propio diseño, no solo parchearlos después, es la idea central de diseño de accesibilidad anticipada.
Por qué compensa el esfuerzo
Una web operable por teclado no beneficia solo a quien no usa ratón. Mejora la experiencia general, ayuda a cumplir normativas como WCAG o la Ley 34/2002 de accesibilidad en España, y amplia el alcance real de tu audiencia. Es, sencillamente, hacer bien el trabajo.
Preguntas frecuentes sobre navegación por teclado
¿Qué es la navegación por teclado en accesibilidad web?
Es la capacidad de usar y navegar un sitio web completo usando solo el teclado (Tab, Enter, flechas, Esc), sin depender del ratón para ninguna acción.
¿Qué valores de tabindex debo evitar?
Evita valores positivos como tabindex="1" o superiores, porque fuerzan un orden manual que rompe el flujo natural del documento. Usa tabindex="0" o tabindex="-1" según el caso.
¿Por qué no debo quitar el outline de los enlaces y botones?
Porque es el indicador visual que permite a un usuario de teclado saber qué elemento tiene el foco en cada momento. Se puede personalizar con CSS, pero nunca eliminar por completo.
¿Cómo pruebo si mi web es navegable por teclado?
Recorre el sitio usando solo la tecla Tab y comprueba que el orden tiene sentido y el foco se ve siempre. Herramientas como Axe o Lighthouse ayudan a automatizar parte de esta revisión.
