Navegación con teclado y gestión del foco
Asegúrese de que todos los elementos interactivos sean accesibles mediante Tab, gestione el foco mediante programación en diálogos y enrutamiento, y cree indicadores de foco visibles.
Navegación con teclado y gestión del foco es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
Por qué es importante la navegación con teclado
Muchos usuarios no pueden utilizar un ratón: personas con discapacidades motoras, usuarios de lectores de pantalla y usuarios avanzados que prefieren el teclado. Si su aplicación no se puede navegar con el teclado, no funciona para ellos.
Tab y Shift+Tab
Tab mueve el foco al siguiente elemento interactivo. Shift+Tab lo mueve al anterior. De forma predeterminada, el orden sigue el orden del DOM; no luche contra ello: deje que el DOM defina el orden de tabulación.
Qué elementos pueden recibir el foco de forma predeterminada
Los elementos interactivos nativos pueden recibir el foco: a[href], button, input, select, textarea, summary. Los elementos personalizados necesitan tabindex.
Valores de tabindex
tabindex="0": se incluye en el orden de tabulación en la posición que ocupa en el DOM. tabindex="-1": solo puede recibir el foco mediante JS (foco mediante un script, no mediante Tab). tabindex=">0": anti patrón; crea un orden de foco confuso, por lo que nunca debe utilizarse.
<!-- Custom button (still: use real <button>!): -->
<div role="button" tabindex="0" onkeydown="...">Custom</div>
<!-- Programmatically focusable, skipped by Tab: -->
<div tabindex="-1" id="error-summary"></div>Indicador de foco visible
No elimine nunca los contornos de foco sin proporcionar un reemplazo. WCAG exige un indicador visible en cada elemento que pueda recibir el foco.
/* BAD: hides focus for everyone */
*:focus { outline: none; }
/* GOOD: only show focus from keyboard (not mouse click) */
:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 2px;
}:focus-visible
La pseudoclase :focus-visible se activa solo cuando el foco procede del teclado, no de un clic del ratón. Permite mantener estilos limpios para el ratón y mostrar el foco del teclado.
Enlace para saltar al contenido
El primer elemento que pueda recibir el foco debe ser un enlace para saltar contenido, de modo que los usuarios del teclado puedan saltar la navegación de la cabecera y llegar directamente al contenido principal.
<a href="#main" class="skip-link">Skip to main content</a>
...
<main id="main" tabindex="-1">...</main>
/* CSS */
.skip-link {
position: absolute; left: -10000px;
}
.skip-link:focus {
left: 1rem; top: 1rem;
background: white; padding: 0.5rem 1rem;
}Trampa de foco en los modales
Cuando se abre un modal, el foco debe quedar atrapado dentro de él: al pulsar Tab desde el último elemento se vuelve al primero, y al pulsar Shift+Tab desde el primero se vuelve al último. Al pulsar Escape se cierra el modal.
// On modal open:
modal.querySelector('h2').focus(); // move focus into modal
lastFocused = document.activeElement;
// On Tab in modal: detect leaving and wrap to first focusable.
// On Escape: close modal and restore focus:
lastFocused.focus();Utilice el elemento dialog
El <dialog> nativo de HTML gestiona automáticamente la trampa de foco, el cierre con Escape y el fondo oscurecido del modal.
<dialog id="signup">
<h2>Sign up</h2>
<form method="dialog">
<input name="email" required>
<button>Submit</button>
<button value="cancel">Cancel</button>
</form>
</dialog>
<script>
document.getElementById('signup').showModal(); // opens with focus trap
</script>Gestión del foco después de cambiar de ruta
Las SPA no vuelven a cargar la página, por lo que los usuarios de lectores de pantalla no reciben ninguna señal de que la navegación haya ocurrido. Mueva el foco al h1 o al main de la nueva página cuando cambie la ruta.
// On route change:
document.getElementById('main')?.focus();
// or focus the new h1:
newPage.querySelector('h1')?.setAttribute('tabindex', '-1');
newPage.querySelector('h1')?.focus();El orden del foco debe coincidir con el orden visual
Asegúrese de que el orden del DOM coincida con el flujo visual. Si CSS reordena los elementos (con flex order, ubicación en grid o position absolute), el orden de tabulación no coincidirá, lo que resultará confuso para todos.
Pruebe apartando el ratón
La prueba de accesibilidad más útil consiste en desconectar el ratón e intentar utilizar toda la aplicación con Tab, Shift+Tab, Enter, Espacio y las teclas de flecha. Si usted se queda bloqueado, sus usuarios también.
Comprobación rápida
¿Qué pseudoclase CSS permite aplicar estilos al contorno de foco solo cuando el foco procede del teclado y no de un clic del ratón?
Resumen: navegación con teclado
Los elementos interactivos nativos pueden recibir el foco de forma predeterminada. Utilice tabindex=0 solo en widgets personalizados; nunca utilice tabindex>0. Muestre siempre el foco: utilice :focus-visible. Añada un enlace para saltar al contenido. Atrape el foco en los modales y restáurelo al cerrarlos. Utilice el elemento nativo <dialog> siempre que sea posible. Mueva el foco al h1/main cuando cambie la ruta. Pruebe apartando el ratón.
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 41
- Lecciones
- 163
Preguntas frecuentes
¿La lección «Navegación con teclado y gestión del foco» es gratis?
Sí — el texto completo de «Navegación con teclado y gestión del foco» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Navegación con teclado y gestión del foco»?
Asegúrese de que todos los elementos interactivos sean accesibles mediante Tab, gestione el foco mediante programación en diálogos y enrutamiento, y cree indicadores de foco visibles. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Navegación con teclado y gestión del foco»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Niveles WCAG A AA AAA
- HTML semántico como base
- Roles y atributos ARIA
- Navegación con teclado y gestión del foco