Estrategia de Tab Order: El Camino del Usuario de Teclado

¿Por qué el Diseñador debe Decidir el Tab Order?

Aunque el orden de tabulación suele ser una consecuencia automática del orden en el código HTML (el DOM), el diseño visual puede ser mucho más complejo. Como diseñadores, a veces creamos layouts con columnas, rejillas (grids) o elementos flotantes que no siguen un orden lineal puro.

Si dejas que el orden de tabulación sea “lo que salga del código”, el usuario de teclado puede acabar saltando de la esquina superior izquierda a la esquina inferior derecha sin previo aviso. Como diseñador, tú conoces la intención del flujo, y debes comunicársela al equipo de desarrollo.

Los 4 Principios de un Buen Tab Order

Para que tu estrategia de tabulación sea todo un éxito, sigue estos cuatro principios:

1. Linealidad y Predictibilidad (Lógica)

El tabulador debe seguir el orden cultural de lectura. En Occidente: de arriba a abajo y de izquierda a derecha.

• Peligro: Si tienes un formulario con dos columnas, define si el tabulador debe ir:
  • A (Columna por Columna): Primero todos los campos de la izquierda, luego los de la derecha.
  • B (Fila por Fila): Los campos pares de izquierda a derecha.

2. Eficiencia y Agilidad (Shortcut)

No obligues al usuario a circular por 50 enlaces de navegación del menú cada vez que quiera leer el contenido principal de una nueva página.

• Solución: Implementa un “Skip to Content Link”. Un enlace invisible (solo aparece al tabular) que salta directamente al área del contenido principal.

3. Agrupación Lógica (Contexto)

Los elementos que realizan tareas parecidas deben tabularse de forma consecutiva.

• Ejemplo: En un reproductor de vídeo, los controles de “Play”, “Pausa”, “Volumen” y “Pantalla Completa” deben estar juntos en el orden de tabulación.

4. No Dejar Elementos en el Olvido

Cualquier cosa que sea clicable con el ratón DEBE ser tabulable con el teclado. Si diseñaste un icono de ayuda que abre un tooltip solo al pasar el ratón, esa funcionalidad no existe para el usuario ciego o de teclado.

Casos Especiales: Dinamismo y Modales

A. Modales y Diálogos (Focus Traps)

Cuando se abre un modal, el tabulador no debe salir de él. El orden de tabulación debe rotar exclusivamente entre los elementos del propio modal hasta que este se cierre.

B. Contenido que Aparece Dinámicamente

Si al pulsar un botón aparece un nuevo conjunto de opciones (ej. un menú desplegable o un acordeón), el siguiente paso del tabulador debe ser entrar en ese nuevo contenido, no saltárselo para ir al siguiente botón de la página principal.

Cómo Documentar el Tab Order en Figma (Handoff)

No asumas que el desarrollador sabrá el orden correcto. Añade una capa de anotaciones a tu diseño:

• Usa círculos numerados (1, 2, 3...) para indicar la secuencia.
• Marca los elementos que deben tener foco al cargar la página (ej. un buscador).
• Indica los puntos donde el foco debe regresar tras una acción (ej. “Vuelve al botón de envío”).

Consejos de Mentor

• Diseña con el teclado en mente: Si una acción es demasiado difícil de alcanzar tabulando, simplifica el layout. Menos clics para un usuario de ratón suelen ser menos pulsaciones para un usuario de teclado.
• La ley del “Tabulador Infinito”: Evita los bucles infinitos de foco (ej. un carrusel de imágenes que no te deja salir hasta que has pasado por las 10 fotos). Debe haber siempre una opción clara de salida.
• Prueba Real: Cierra los ojos y navega por tu producto usando solo el tabulador y un lector de pantalla. ¿Ha sido fácil llegar a la acción principal o has tenido que tabular 40 veces?

Recursos y Herramientas

• W3C: WCAG Focus Order
• WebAIM: Keyboard Accessibility Patterns
• Deque University: Sequential Focus Order
• Artículos: A Designer’s Guide to Focus Order

accessibility-tree gestion-de-foco aria-vs-semantica pruebas-lectores-pantalla redlining-especificaciones