La respuesta corta

Aparta el ratón y usa Tab para avanzar, Mayús+Tab para retroceder, Intro para seguir enlaces y pulsar botones, Espacio para casillas y botones, las flechas dentro de los menús y Esc para cerrar ventanas emergentes. Siempre debes ver dónde estás, llegar a todo lo que se puede pulsar en un orden lógico y nunca quedarte atrapado.

Puntos clave

  • Mucha gente navega con el teclado o con un dispositivo que funciona como tal.
  • Siempre debes ver un contorno de foco claro.
  • El orden debe seguir la lectura visual de la página.
  • Los menús, ventanas emergentes y carruseles esconden la mayoría de las trampas.
  • Añade un enlace «Saltar al contenido» para no recorrer el menú en cada página.

Las herramientas automáticas son muy buenas para encontrar etiquetas y textos alternativos que faltan, pero solo una persona puede saber si un sitio se puede usar de verdad sin ratón. Las personas ciegas, con temblores o movilidad reducida, y quienes simplemente prefieren el teclado dependen de ello. La prueba dura cinco minutos.

Las teclas que necesitas

  • Tab: siguiente enlace, botón o campo
  • Mayús + Tab: anterior
  • Intro: seguir un enlace, pulsar un botón, enviar
  • Espacio: pulsar un botón, marcar una casilla, desplazarse
  • Flechas: botones de opción, menús, controles deslizantes, pestañas
  • Esc: cerrar un menú o un diálogo

En Mac con Safari, activa primero «Pulsar Tab para resaltar cada ítem de una página web» en los ajustes de Safari, en Avanzado.

La prueba, paso a paso

  1. Empieza en la parte superior de la página

    Haz clic en la barra de direcciones y pulsa Tab. Lo primero que alcances debería ser, idealmente, un enlace «Saltar al contenido principal».

  2. Recorre todo con Tab

    Pulsa Tab varias veces. Cada enlace, botón y campo debe recibir un contorno visible, en un orden que coincida con la lectura de la página.

  3. Usa cada control

    Abre el menú con Intro, muévete dentro con las flechas o Tab y ciérralo con Esc. Marca casillas con Espacio. Envía un formulario con Intro.

  4. Abre y cierra ventanas emergentes

    Abre un diálogo o un aviso de cookies. El foco debe entrar en él, quedarse dentro mientras esté abierto y volver al botón que lo abrió al pulsar Esc.

  5. Busca trampas

    Si no puedes salir con Tab de un reproductor de video, un mapa o un widget de chat, es una trampa de teclado (WCAG 2.1.2) y una barrera grave.

  6. Anota y corrige

    Anota cada problema con la página y el elemento. La mayoría de las correcciones son pequeñas: añadir un estilo de foco, usar un botón real en lugar de un div o corregir el orden en el HTML.

Los cuatro problemas más comunes y cómo corregirlos

Sin foco visible. Alguien añadió outline: none para que se viera más limpio. Recupéralo con un estilo claro como :focus-visible { outline: 3px solid #1F4FD8; outline-offset: 2px; }.

Div clicables. Un <div onclick> no se alcanza con Tab. Usa un <button> real para las acciones y <a href> para los enlaces. Funcionan con el teclado sin esfuerzo.

Orden extraño. Los valores positivos de tabindex (1, 2, 3) o el CSS que mueve elementos visualmente pueden hacer saltar el foco. Quita los tabindex positivos y corrige el orden en el HTML.

Foco oculto. Un encabezado fijo o un aviso de cookies tapa el elemento con foco. WCAG 2.2 añadió una regla para esto (2.4.11, Foco no oculto). Añade margen de desplazamiento: html { scroll-padding-top: 90px; }.

Conviértelo en un hábito

Repite esta prueba cada vez que lances una nueva plantilla, menú o formulario. Accessible Nord marca los patrones de código que suelen causar problemas de teclado, como los div clicables y los tabindex positivos, para que sepas dónde mirar primero. Para una visión completa, lee cómo hacer una auditoría de accesibilidad en una tarde.

Fuentes

La mayoría de las fuentes son documentos oficiales en inglés.

  1. Understanding WCAG 2.2: Keyboard (2.1.1)
  2. Understanding WCAG 2.2: Focus Visible (2.4.7)
  3. Understanding WCAG 2.2: Focus Not Obscured (Minimum) (2.4.11)
  4. WebAIM: Keyboard accessibility

Última revisión: .

Preguntas frecuentes

¿Necesito un lector de pantalla para probar la accesibilidad?

Una prueba con teclado es el mejor primer paso y no requiere software adicional. Probar después con un lector de pantalla gratuito como NVDA en Windows o VoiceOver en Mac y iPhone es un gran siguiente paso.

¿Qué es un enlace de salto?

Un enlace al principio de la página, a menudo oculto hasta que recibe el foco, que lleva directamente al contenido principal. Evita que quienes usan el teclado recorran todo el menú en cada página.

¿El widget de Accessible Nord ayuda a quienes usan el teclado?

Añade un contorno de foco marcado, resalta los enlaces y ofrece un menú de estructura de la página, lo que ayuda. Pero las trampas de teclado y los div clicables deben corregirse en tu código.

Esta guía es información general, no asesoría legal. Para tus obligaciones concretas, consulta con un abogado o con tu regulador.