0Pricing
HTML Academy · Lección

Navegación con teclado y orden del foco

Asegúrese de que todas las funciones sean accesibles y lógicas mediante el teclado

Navegación con teclado y orden del foco es una lección gratuita de HTML 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 HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.

¿Quién necesita la navegación con teclado?

Muchos usuarios dependen de la navegación con teclado:

  • Personas con discapacidades motoras: no pueden usar un ratón
  • Usuarios avanzados: prefieren los atajos de teclado
  • Usuarios de lectores de pantalla: navegan completamente con el teclado
  • Usuarios de acceso mediante conmutadores: usan botones que simulan pulsaciones de teclas

Elementos que reciben el foco de forma natural

Estos elementos HTML pueden recibir el foco del teclado de forma predeterminada:

  • <a href>: Tabulador desplaza el foco hasta él y Enter lo activa
  • <button>: Tabulador desplaza el foco hasta él y Enter/Espacio lo activa
  • <input>, <textarea>, <select>: Tabulador desplaza el foco hasta ellos
  • <details> / <summary>: Tabulador + Enter

Orden de tabulación

El navegador determina el orden de tabulación de la siguiente manera:

  • De forma predeterminada, según el orden del DOM: los elementos reciben el foco en el orden en que aparecen en HTML
  • Valores positivos de tabindex: esos elementos reciben el foco primero, en orden ascendente
  • tabindex="0": se añade al orden de tabulación natural en su posición dentro del DOM
  • tabindex="-1": no forma parte del orden de tabulación; solo puede recibir el foco mediante un script

Orden de tabulación natural = orden del DOM

El orden de lectura de su HTML debe coincidir con la disposición visual:

<!-- GOOD: DOM order matches visual left-to-right, top-to-bottom: -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>

<!-- BAD: visually reordered with CSS, DOM order broken:
     CSS flexbox order: doesn't affect tab order!
     Screen readers and keyboard users follow DOM order, not CSS order -->

Indicador de foco visible

WCAG 2.4.7 (nivel AA): el foco del teclado debe ser visible:

/* NEVER do this: */
* { outline: none; }           /* removes all focus outlines */

/* GOOD: styled focus indicator: */
:focus-visible {
  outline: 2px solid #0070f3;
  outline-offset: 3px;
  border-radius: 4px;
}

/* :focus-visible shows outline for keyboard only
   mouse clicks don't trigger :focus-visible -->
/* But outline: none with :focus (not :focus-visible) hides for both */

Estilos de foco personalizados

Estilos de foco del sistema de diseño:

/* Replace outline with box-shadow for rounded elements: */
button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.4);
}

/* Always ensure 3:1 contrast ratio between
   focus indicator and background (WCAG 2.4.11 Level AA) */

Orden de foco lógico

El orden del foco debe ser lógico y predecible (WCAG 2.4.3, nivel A):

<!-- BAD: focus order jumps around the page -->
<!-- First: footer link (tabindex=5) -->
<!-- Then: sidebar (tabindex=3) -->
<!-- Then: header nav (tabindex=1) -->

<!-- GOOD: natural DOM order matches reading flow: -->
<!-- Header → Nav → Main Content → Sidebar → Footer -->

Enlaces para omitir la navegación

Los enlaces para omitir la navegación permiten a los usuarios del teclado evitar la navegación repetitiva:

<a href="#main-content" class="skip-link">Skip to main content</a>

<!-- Visually hidden until focused: -->
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: #0070f3;
  color: white;
  padding: 0.75rem;
  z-index: 9999;
}
.skip-link:focus {
  top: 0;  /* visible when focused -->
}

Trampa de foco en modales

Los modales deben mantener el foco dentro de ellos mientras están abiertos:

<!-- When modal opens:
1. Move focus to modal container or first interactive element
2. Tab stays within modal
3. When modal closes, return focus to the trigger button
-->

const modal = document.getElementById('modal');
const trigger = document.getElementById('open-modal');

function openModal() {
  modal.removeAttribute('hidden');
  modal.querySelector('button, [tabindex="0"]').focus();
}

function closeModal() {
  modal.setAttribute('hidden', '');
  trigger.focus();
}

Atajos de teclado

Implemente atajos de teclado con detectores de eventos:

document.addEventListener('keydown', (e) => {
  // Close modal on Escape:
  if (e.key === 'Escape') closeModal();

  // Navigate tabs with arrow keys:
  if (e.key === 'ArrowRight') focusNextTab();
  if (e.key === 'ArrowLeft') focusPrevTab();

  // Submit form on Enter (default behavior in inputs):
  // Nothing needed — browser handles this
});

Pruebas de navegación con teclado

Cómo probar la accesibilidad del teclado:

  1. Aparte el ratón y use únicamente el teclado
  2. Pulse Tabulador: ¿puede llegar a todos los elementos interactivos?
  3. ¿El indicador de foco está siempre visible?
  4. ¿El orden de tabulación tiene sentido lógico?
  5. ¿Puede usar todas las funciones (formularios, modales, menús desplegables) sin ratón?
  6. Pulse Mayús+Tabulador para desplazarse hacia atrás

Comprobación rápida

¿Qué propiedad CSS nunca debe eliminar de todos los elementos para garantizar la accesibilidad del teclado?

Repaso: navegación con teclado

Aspectos esenciales de la accesibilidad del teclado:

  • Todos los elementos interactivos deben poder alcanzarse con Tabulador
  • El orden del DOM = el orden de tabulación: debe coincidir con la disposición visual
  • Nunca elimine los contornos de foco; use :focus-visible para los estilos personalizados
  • Los enlaces para omitir la navegación permiten evitar la navegación repetitiva
  • Use una trampa de foco en los modales y devuelva el foco al cerrarlos
  • Pruebe el sitio utilizando únicamente el teclado

Preguntas frecuentes

¿La lección «Navegación con teclado y orden del foco» es gratis?

Sí — el texto completo de «Navegación con teclado y orden 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 HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Navegación con teclado y orden del foco»?

Asegúrese de que todas las funciones sean accesibles y lógicas mediante el teclado Practicas HTML 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 HTML Academy?

No se requiere experiencia previa. HTML 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 orden 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 HTML Academy?

Sí. Cada lección de HTML 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

  1. Por qué importa la accesibilidad: niveles WCAG
  2. Jerarquía de encabezados para lectores de pantalla
  3. Texto alternativo de imágenes: cuándo y cómo
  4. Navegación con teclado y orden del foco
← Volver a HTML Academy