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.