Volver al blog

Cómo revisar la navegación con teclado de un sitio web

Probá tu sitio sin mouse para descubrir enlaces, botones, menús y formularios difíciles de alcanzar o usar con el teclado.

4 min de lectura
Persona que prueba la navegación de un sitio web con el teclado de una computadora portátil

Un sitio puede verse bien y responder al mouse, pero volverse difícil de usar cuando alguien navega solo con el teclado. Una prueba manual breve permite detectar controles que no se alcanzan, menús de los que no se puede salir y formularios cuyo foco resulta imposible de ubicar.

La revisión no certifica conformidad ni reemplaza una evaluación completa. Sí ofrece una forma sencilla de encontrar problemas antes de publicar o después de un cambio. La WCAG 2.2 del W3C incluye criterios relativos al uso del teclado y al foco. Para decidir si se cumplen los requisitos aplicables, hay que revisar el estándar completo y el contexto del sitio.

Prepará una prueba sencilla

Abrí una página representativa, por ejemplo una que incluya navegación principal, enlaces, un botón y un formulario. Desconectá el mouse o, sencillamente, no lo uses. En la mayoría de los navegadores, Tab avanza entre controles interactivos y Mayús+Tab retrocede. Las flechas, Enter, la barra espaciadora y Escape pueden tener funciones distintas según el control y el navegador.

No asumas que todas las teclas deben comportarse igual en todos los componentes: observá qué hace cada control y si la interacción resulta comprensible. Si la página incluye un menú, un acordeón o una ventana emergente, probalos por separado. Registrá el navegador, la página y el paso exacto donde aparece cada dificultad; eso hace que el hallazgo sea más fácil de reproducir.

Seguí el foco y comprobá que sea visible

Presioná Tab desde el comienzo y observá cada paso. El foco suele mostrarse mediante un contorno u otro cambio visual; si desaparece sobre un fondo, queda tapado por un encabezado fijo o salta a una zona inesperada, la persona puede perder la referencia de dónde está.

El foco debería avanzar en un orden que acompañe la lectura y el uso de la página. No hace falta que siga una secuencia visual idéntica en cada diseño, pero sí que permita entender qué elemento está activo y llegar al siguiente sin sorpresas. Repetí el recorrido con Mayús+Tab para ver si se puede volver atrás. WAI recomienda evaluar la accesibilidad desde etapas tempranas y durante el desarrollo; una comprobación frecuente puede ayudar a encontrar barreras cuando todavía es sencillo corregirlas.

Esquema de una página web con el indicador de foco avanzando por sus controles
Una revisión manual permite comprobar si el foco llega a los controles y se distingue claramente.

Probá los controles, no solo el recorrido

Llegar a un control no basta: también hay que poder usarlo. En cada página, comprobá lo siguiente:

  • Enlaces y botones: ¿se activan con el teclado? ¿Su función se entiende por el texto o el contexto?
  • Menús: ¿podés abrir y cerrar el menú, moverte por sus opciones y salir de él sin quedar atrapado?
  • Formularios: ¿podés completar cada campo, cambiar opciones y enviar el formulario? Si aparece un error, ¿podés encontrarlo y corregirlo?
  • Ventanas y diálogos: si se abre una ventana encima del contenido, ¿el foco llega a ella y luego vuelve a un lugar lógico al cerrarla?
  • Elementos desplegables o interactivos: ¿el teclado permite llegar a todas las opciones y elegirlas?

La lista sirve para localizar comportamientos problemáticos, no para declarar conformidad con un criterio concreto. El comportamiento esperado depende del componente y de las técnicas que use el sitio.

Encontrá los obstáculos más frecuentes

Prestá atención a estas señales: el foco no aparece; un control importante solo responde al mouse; el orden salta sin sentido; un menú queda abierto y no hay forma evidente de cerrarlo; una ventana atrapa el foco; o el foco desaparece tras una actualización de contenido.

También observá si los controles se distinguen por su etiqueta. Un icono sin nombre comprensible puede ser difícil de interpretar, aunque sea posible alcanzarlo. Cuando identifiques un problema, anotá una secuencia concreta, por ejemplo: “En la página de contacto, Tab llega al botón Enviar, pero no alcanza la opción de adjuntar un archivo”. Evitá registrar solo “no funciona”: el detalle permite reproducirlo y comprobar una corrección.

Usá las herramientas como complemento

Una extensión o un analizador puede ayudar a detectar ciertos problemas, pero no reemplaza la prueba manual. WAI explica que las herramientas pueden identificar posibles barreras, pero que hay aspectos que requieren intervención y juicio humano. Por eso, una pantalla sin avisos no demuestra que todas las personas puedan completar la tarea.

Repetí la prueba en las páginas y flujos importantes, especialmente después de cambiar navegación, formularios o componentes. Para una revisión más amplia, combiná esta comprobación con otras pruebas y con una evaluación experta cuando corresponda.

Una prueba útil no consiste en recorrer rápido la página, sino en comprobar si cada tarea puede completarse sin perder el rumbo.

Para empezar hoy: elegí una tarea clave, como enviar una consulta; recorré todo el flujo con Tab, Mayús+Tab y las teclas necesarias para activar los controles; anotá cada bloqueo; corregí uno por vez y repetí la prueba. Así transformás una impresión general en hallazgos concretos que se pueden verificar.