Navegación por Teclado y Focus Management

Navegación por Teclado: El Test Definitivo

Si tu sitio web no funciona sin mouse, no es accesible. La navegación por teclado es la forma en que millones de personas interactúan con la web: personas con discapacidades motoras, usuarios avanzados que prefieren el teclado, y cualquiera que temporalmente no pueda usar el mouse.

Teclas esenciales de navegación

• Tab: avanza al siguiente elemento interactivo (links, botones, inputs)


• Shift + Tab: retrocede al elemento interactivo anterior


• Enter: activa links y botones (equivalente a clic)


• Space: activa botones, checkboxes y selecciona opciones en dropdowns


• Escape: cierra modales, menús desplegables y tooltips


• Flechas: navega dentro de componentes complejos (tabs, menús, radio buttons)

Focus visible y estilos

• El outline de focus NUNCA debe eliminarse sin reemplazo: 'outline: none' sin alternativa es un crimen de accesibilidad


• Usa :focus-visible en lugar de :focus — solo muestra el outline cuando el usuario navega con teclado, no con mouse


• El estilo de focus debe ser claramente visible: un outline de 2px con color contrastante sobre el fondo


• Personaliza el focus para que combine con tu diseño: sombras, outlines coloreados, fondos — pero que sea obvio


• Prueba: navega tu sitio con Tab y mira si siempre puedes saber dónde está el focus actual

Focus management en componentes dinámicos

• Modales: cuando se abre un modal, el focus debe moverse al primer elemento interactivo dentro del modal


• Focus trap: dentro de un modal, Tab debe circular entre los elementos del modal sin escapar al contenido detrás


• Al cerrar un modal: el focus debe volver al elemento que lo abrió (el botón que activó el modal)


• Contenido dinámico: si cargas contenido con JavaScript (infinite scroll, AJAX), asegúrate de que los nuevos elementos sean alcanzables


• Skip link: agrega un enlace oculto al inicio de la página que dice 'Saltar al contenido principal' — aparece al presionar Tab

Tab order correcto

• El orden de tabulación debe seguir el orden visual de lectura (izquierda a derecha, arriba a abajo)


• Nunca uses tabindex con valores positivos (tabindex='1', tabindex='2') — crea un orden caótico e impredecible


• tabindex='0': agrega un elemento al flujo natural de tabulación (solo si es interactivo)


• tabindex='-1': permite que un elemento reciba focus programáticamente pero no con Tab (útil para focus management en modales)


• El mejor tab order es el que resulta naturalmente del orden del DOM — si necesitas tabindex positivos, reorganiza tu HTML

Ejemplo práctico

/* NUNCA hagas esto */

*:focus { outline: none; }



/* BIEN: personaliza el focus visible */

*:focus-visible {

  outline: 2px solid #3B82F6;

  outline-offset: 2px;

}



/* Skip link */

.skip-link {

  position: absolute;

  top: -100%;

  left: 0;

}

.skip-link:focus {

  top: 0; /* Aparece al presionar Tab */

}

Consejo: Haz la prueba ahora: desconecta tu mouse (o no lo toques) y navega tu sitio solo con el teclado. Si en algún momento te pierdes, no puedes ver dónde está el focus, o no puedes hacer algo que harías con mouse, encontraste un problema de accesibilidad.