Gestión de Foco: La Navegación sin Ratón

¿Por qué el Diseñador debe Gestionar el Foco?

Imagina que entras en una habitación a oscuras y solo tienes una linterna. La zona que ilumina tu linterna es “el foco”. Si mueves la linterna y, de repente, la luz desaparece o salta a la habitación de al lado sin sentido, te sentirás perdido y frustrado.

En una interfaz, el foco funciona igual. Si el usuario pulsa Tab y el cursor desaparece o salta del menú principal al pie de página sin pasar por el contenido, la interfaz está rota para él. Una buena gestión de foco no es un detalle técnico; es la base de la usabilidad.

Los 4 Pilares de una Buena Gestión de Foco

Para que tu producto sea verdaderamente accesible, debes trabajar en estos cuatro frentes:

1. Indicador de Foco Visible (Focus Ring)

Nunca elimines el borde (outline) que aparece alrededor de un elemento cuando se selecciona con el teclado.

• Microinteracción: Puedes personalizar el diseño (cambiar el color o el grosor para que encaje con tu marca), pero siempre debe ser claramente visible. Un foco invisible es una interfaz inusable para millones de personas.

2. Orden Lógico de Tabulación (Tab Order)

El foco debe seguir el orden natural de lectura de la página (de arriba a abajo y de izquierda a derecha en Occidente).

• Peligro: Si diseñas un formulario de dos columnas en Figma, asegúrate de documentar si el usuario debe tabular primero toda la columna izquierda o ir fila por fila de izquierda a derecha.

3. Atrapado del Foco (Focus Traps)

Cuando se abre un elemento modal (una ventana emergente de confirmación), el foco debe quedar atrapado dentro de ese modal.

• Si el usuario pulsa Tab y el foco sale del modal para seleccionar algo que está “detrás”, la persona ciega no sabrá qué ha pasado y su lector de pantalla se volverá loco.

4. Retorno del Foco

Cuando un elemento modal se cierra, el foco debe volver exactamente al botón que lo abrió. Si el usuario cierra el modal y el foco vuelve al principio de la página, tendrá que tabular toda la interfaz de nuevo para seguir por donde iba.

Flujos Especiales: Diseñar el Movimiento del Foco

Como diseñador de producto, debes definir cuándo el sistema debe mover el foco de forma automática:

• Carga de Página: Si un usuario llega a una página de “Búsqueda”, ¿queremos que el foco esté ya en el buscador? (¡Cuidado con esto! Puede ser molesto si no se espera).
• Validación de Errores: Si al pulsar “Enviar” hay un error, mueve el foco al primer campo fallido para que el usuario pueda empezar a arreglarlo de inmediato.
• Carga de Contenido Dinámico: Si al pulsar un botón aparece un nuevo bloque de información, pregúntate si el foco debe saltar allí para avisar al usuario de que algo ha cambiado.

El Handoff de Foco: Especificaciones para el Equipo de Desarrollo

En tus archivos de Figma, no limites la entrega a los estados Default y Hover. Empieza a incluir el estado Focus. Utiliza anotaciones para indicar el camino que debe seguir el tabulador (1, 2, 3...) si la estructura visual es compleja y no coincide exactamente con el orden lineal del código.

Consejos de Mentor

• Prueba el “Día del Teclado”: Pasa un día entero trabajando en tu ordenador sin tocar el ratón. Te darás cuenta rápidamente de qué partes de tu producto son inusables y dónde el foco está fallando.
• Consistencia Visual: Usa el mismo estilo de indicador de foco en toda la aplicación para que el usuario aprenda a reconocerlo rápidamente.
• No reinventes el Tabulado: Sigue los estándares del navegador. No intentes capturar teclas de forma extraña a menos que estés construyendo un editor de vídeo o una herramienta de diseño avanzada.

Recursos y Herramientas

• W3C: Keyboard Navigation Best Practices
• WebAIM: Keyboard Accessibility
• Deque University: Focus Management Guide
• Artículos: The Power of Focus in UX Design

accessibility-tree aria-vs-semantics tab-order-strategy screen-reader-testing identidad-roles-estados