Teclado y foco visible sin trampas

Cómo asegurar recorridos completos por teclado con foco visible, orden lógico y retorno controlado.

📘 Teoría

Bases para que cualquier flujo crítico sea navegable solo con teclado.

No elimines outline sin una alternativa clara y con contraste suficiente.

Evita `tabindex` positivos: suelen romper secuencia y mantenimiento.

Al abrir un modal, mueve foco al primer control útil del diálogo.

Al cerrar, devuelve foco al elemento que abrió el contexto.

Respeta Enter y Espacio según tipo de control y evita comportamientos sorpresa.

Foco atrapado o perdido tras render dinámico, especialmente en SPA.

Cómo comprobar y corregir navegación por teclado en componentes vivos.

Recorre cada pantalla con Tab y Shift+Tab anotando puntos donde el foco desaparece o se salta controles.

En overlays, prueba apertura, interacción y cierre sin tocar el ratón.

Automatiza checks de foco visible, pero conserva validación manual en flujos complejos.

Ejemplo pequeño de foco visible y orden lógico de controles.

Base de navegación por teclado

<button type="button">Abrir filtro</button>
<a href="#detalle">Ver detalle</a>
<input id="buscar" type="search" aria-label="Buscar por nombre" />

Ejemplo Demo guiada Practica foco visible y retorno al cerrar un panel.

⌄

Reto Reto práctico Implementa retorno de foco al cerrar un bloque contextual.

⌄

Test

Comprueba tus conocimientos con un test sobre Accesibilidad Web.

Recursos del curso 25