Abres una ventana de confirmación con el teclado. El fondo se oscurece, pero el foco sigue pasando por los enlaces de la página. Al cerrar, la siguiente pulsación de Tab salta a un lugar inesperado. Es un fallo pequeño hasta que intentas completar la tarea sin ratón.
Un diálogo modal necesita una caja superpuesta y un recorrido de foco. Conviene decidir ambos antes de ajustar sombras, transiciones o el color de la capa.
Dibuja el recorrido antes de programar
El flujo básico tiene tres momentos: el foco parte del botón que abre el diálogo, entra en un elemento de la ventana y vuelve al punto de partida al cerrar. Mientras el modal está abierto, Tab y Mayús + Tab recorren únicamente sus controles. La guía de patrones de WAI-ARIA describe esa secuencia y también espera que Escape cierre la ventana.
Llévalo al wireframe con tres estados y una flecha de vuelta. Si el recorrido no se entiende en ese dibujo, falta decidir qué control recibe el foco en cada paso.
Elige el primer foco según la tarea
Mandar siempre el foco al aspa de cierre es cómodo, pero puede saltarse lo importante. En una confirmación breve suele tener sentido enfocar la acción segura o más probable. Si el contenido es largo, el W3C aconseja enfocar un título o un párrafo inicial con tabindex="-1", para que la lectura empiece arriba.
El estándar HTML permite señalar la elección con autofocus. Un campo editable puede ser el comienzo lógico. En una confirmación destructiva, enfoca la opción menos peligrosa.
Mantén la página fuera del tabulador
Al abrir un <dialog> con showModal(), el navegador coloca la ventana en la capa superior y deja inerte el resto de la página. También aporta el cierre con Escape y buena parte del comportamiento de foco, según la referencia de MDN. Es un punto de partida bastante más sólido que levantar un modal con un div y varios parches.
Aun así, incluye un botón visible para cerrar, un nombre accesible y un orden de controles comprensible. Poner aria-modal="true" sin bloquear el fondo puede ocultar el resto de la interfaz a tecnologías de asistencia mientras el ratón aún permite usarla.
Comprueba también el regreso
Cierra con el botón, con Escape y después de completar la acción. El foco debería volver al elemento que abrió el diálogo. El estándar guarda ese elemento para restaurarlo; si ya no existe, elige otro punto que continúe la tarea, como la fila recién creada.
La prueba cabe en un minuto: abre, pulsa Tab hasta completar una vuelta, cierra y vuelve a pulsar Tab. Si el siguiente foco continúa donde estabas, anota la prueba como superada. Si salta al inicio de la página, todavía falta decidir la devolución.
0 comentarios
Todavía no hay comentarios.
Deja un comentario