¿Qué es el «focus management» y cómo se relaciona con HTML y accesibilidad?

El «focus management» o «gestión del foco» se refiere al control consciente de qué elemento de tu página web tiene la atención del teclado en un momento dado y cómo se transfiere ese foco entre elementos. Es fundamental para la accesibilidad, especialmente para usuarios que navegan exclusivamente con teclado o utilizan lectores de pantalla.

¿Por qué es importante para la accesibilidad?

Los usuarios de teclado necesitan que el foco se mueva de manera lógica y predecible para poder interactuar con todos los elementos interactivos. Los lectores de pantalla, a su vez, suelen anunciar el elemento que recibe el foco. Una mala gestión puede hacer que los usuarios se pierdan, no puedan acceder a ciertas partes de la web o se sientan desorientados si el foco salta inesperadamente.

Relación con HTML:

HTML proporciona las bases para la gestión del foco:

1. Elementos enfocables por defecto:
   Elementos como enlaces (<a> con href), botones (<button>), y controles de formulario (<input>, <select>, <textarea>, <summary>) son naturalmente enfocables y se incluyen en el orden de tabulación secuencial del documento.
2. El atributo tabindex:
   • tabindex="0": Permite que elementos que no son interactivos por naturaleza (como un <div> que actúa como botón mediante JavaScript) reciban foco secuencialmente con el teclado. HTML<div id="miBotonCustom" tabindex="0" role="button">Púlsame</div>
   • tabindex="-1": Hace que un elemento pueda recibir foco mediante programación (usando JavaScript: elemento.focus()), pero lo excluye del orden de tabulación natural. Es muy útil para dirigir el foco a elementos dinámicos como ventanas modales, mensajes de error o contenido que aparece y desaparece. HTML<div id="miModal" tabindex="-1" role="dialog">Contenido del modal</div>
   • Evita tabindex con valores positivos (ej. tabindex="1"), ya que alteran el orden natural de forma que suele ser confusa y difícil de mantener.

El papel de JavaScript:

Mientras HTML define qué puede recibir foco, JavaScript es a menudo necesario para gestionar activamente dónde y cuándo se mueve el foco, especialmente en interfaces dinámicas:

• Al abrir un diálogo modal, el foco debe moverse dentro del modal y quedar «atrapado» allí.
• Al cerrar el modal, el foco debe regresar al elemento que lo activó.
• Tras una acción, como añadir un ítem a una lista, puede ser útil mover el foco al nuevo ítem o a un mensaje de confirmación.

Una buena gestión del foco implica que sea visible, predecible y que, en componentes como modales, esté contenido.