# Gestión de Foco: La Navegación sin Ratón > Aprenda a diseñar y gestionar el foco de navegación en su producto digital para asegurar una experiencia fluida para usuarios de teclado, lectores de pantalla y tecnología asistiva. *Tags: ux, tecnica, accesibilidad, a11y, desarrollo* --- > [!info] Definición Rápida > La **Gestión de Foco** es el control de qué elemento de la interfaz está seleccionado en cada momento para interactuar con él. Es la columna vertebral de la navegación para usuarios de teclado (que pulsan `Tab`), lectores de pantalla y cualquier persona que no use un 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](https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html) - **WebAIM:** [Keyboard Accessibility](https://webaim.org/techniques/keyboard/) - **Deque University:** [Focus Management Guide](https://dequeuniversity.com/curriculum/courses/fundamentals/focus-management) - **Artículos:** [The Power of Focus in UX Design](https://uxdesign.cc/focus-management-in-web-accessible-applications-957b8e3e8e3) --- [[accessibility-tree]] [[aria-vs-semantics]] [[tab-order-strategy]] [[screen-reader-testing]] [[identidad-roles-estados]] --- Source: https://www.fernandoux.com/es/wiki/techniques/focus-management/