Probar el orden de una pantalla dibujada usando solo la tecla Tab

Para descubrirlo no necesitamos abrir una aplicación. Vamos a usar dos pantallas ficticias dibujadas en papel y pequeñas tarjetas que representan el foco, el lugar donde actuaría la próxima tecla.

Qué significa que un control tenga el foco

En una página real, el foco permite saber dónde actuará la próxima tecla. Puede señalar un enlace, una casilla para escribir o un botón. El navegador y el sitio pueden mostrarlo con un borde visible u otra indicación. No es lo mismo que el cursor del ratón.

En muchos formularios, Tab mueve el foco hacia delante y Mayús + Tab lo hace retroceder. Las teclas para activar o cambiar un control dependen del tipo de elemento; aquí solo practicaremos el orden, sin enviar respuestas ni hacer cambios en una web.

El recorrido tiene que servir para realizar la tarea

Si el ejercicio pide responder la pregunta 1, responder la 2 y luego revisar antes de terminar, un recorrido fácil de comprender sería:

Pregunta 1 → Pregunta 2 → Revisar → Terminar.

El criterio 2.4.3 de las WCAG del W3C pide que, cuando el orden de navegación afecta al significado o al funcionamiento, los controles reciban el foco en una secuencia que conserve ese sentido y permita utilizarlos. No exige un único orden visual para todas las páginas: pueden existir varios recorridos razonables, siempre que funcionen con coherencia.

Dos pantallas de papel, dos recorridos

Pantalla A. Una hoja muestra, de arriba abajo, cuatro controles: «Pregunta 1», «Pregunta 2», «Revisar» y «Terminar». Las tarjetas de avance también llevan ese orden. Al simular cuatro pulsaciones de Tab, la persona llega a cada control en el orden esperado.

Pantalla B. La otra hoja parece mostrar las mismas cuatro posiciones, pero las tarjetas indican otro recorrido: «Pregunta 1», «Terminar», «Pregunta 2», «Revisar». Aunque el botón final aparece abajo del dibujo, la segunda pulsación llega allí demasiado pronto. El problema no es el color de los botones, sino el salto operativo.

En una página verdadera, el orden de foco depende de cómo se hayan construido sus controles, no simplemente de la ubicación que vemos. Por eso una captura de pantalla, por sí sola, no demuestra cuál es el recorrido real. Esta ficha es un modelo para razonar y ensayar, no una auditoría de una aplicación existente.

Cómo jugar con las tarjetas de foco

1. Coloca la primera pantalla frente a ti. No pongas números sobre la pantalla todavía.
2. Lee en voz alta o en silencio cuál es la tarea: responder ambas preguntas, revisar y terminar.
3. Toma las cuatro tarjetas de avance proporcionadas en el PDF y, por turnos, coloca una sobre el control que recibiría el foco en cada pulsación de Tab.
4. Escribe la ruta completa. Marca con un círculo si el foco llega al botón final antes de pasar por las dos preguntas.
5. Propón un nuevo orden de tarjetas para la pantalla B y explica por qué permite completar la tarea.

Se puede señalar las tarjetas o dictar el orden si escribir resulta difícil. Lo importante es justificar la secuencia. Un texto impreso que no es interactivo no tiene por qué recibir el foco en cada paso.

Una reparación sencilla y una pregunta más difícil

Para la pantalla B, cambia las tarjetas para que el recorrido sea Pregunta 1 → Pregunta 2 → Revisar → Terminar. Esa solución cumple el objetivo del ejercicio. También podría ser razonable situar «Revisar» después de ambas preguntas y antes de una acción «Guardar», si esos fueran los controles reales del formulario.

Ahora imagina que una página contiene un enlace de ayuda junto a la primera pregunta. ¿Debe estar antes o después de la segunda? No hay una respuesta universal: puede resultar lógico encontrarlo inmediatamente después de la primera pregunta si ayuda a responderla. Tendremos que examinar la función de cada elemento y la secuencia completa.

Actividad breve con respuesta

Pantalla inventada: el foco va primero a «Nombre», luego a «Enviar» y al final a «Correo electrónico». El formulario requiere rellenar ambos datos antes de enviarlo. ¿Qué cambio propondrías?

Respuesta: «Nombre → Correo electrónico → Enviar» es una secuencia razonable: los campos necesarios aparecen antes de la acción final. El dibujo no permite asegurar cómo funcionaría una web real sin probarla con teclado.

Ficha imprimible y clave

La ficha PDF trae ambas pantallas, fichas recortables de avance y tabla para anotar y corregir el recorrido. El PDF de soluciones distingue el orden propuesto de una comprobación real, que requeriría probar la página implementada con teclado.