Blog
ArtículoAccesibilidad3 min de lectura

La revisión de un cuadro de diálogo empieza antes de abrirlo

Importan el estado cerrado, el movimiento del foco, la recuperación ante errores y el regreso al contenido. Una captura del cuadro abierto solo muestra una parte de la interacción.

Por Equipo de auditoría de diseño

Empieza por el control que lo activa

Piensa en un cuadro de diálogo para cambiar el nombre de un proyecto guardado. Llega hasta el control que lo activa con el teclado y úsalo. Comprueba que su etiqueta describa la acción y que el cuadro tenga un nombre accesible que indique su propósito. Aunque el panel se vea claro, esas relaciones pueden ser difíciles de entender si no están definidas.

El foco inicial debe adaptarse al contenido. En un cuadro breve para cambiar un nombre, quizá convenga enfocarlo en el campo de entrada; uno más largo tal vez necesite establecer primero el contexto de lectura. No des por hecho que el primer botón es siempre el lugar adecuado para el foco.

Sigue el foco dentro del cuadro

Mientras un cuadro modal está activo, el contenido del fondo no debe seguir siendo interactivo. Desplaza el foco hacia delante y hacia atrás y comprueba que permanezca dentro del cuadro, en vez de perderse en la página que queda oculta.

Una captura de pantalla no demuestra cómo funciona esta interacción. Prueba la interacción real e incluye una forma clara de cerrar el cuadro. Usa el patrón de cuadros de diálogo de la W3C como guía de implementación y evalúa los requisitos de accesibilidad pertinentes en el contexto de toda la página.

Prueba un envío que no se complete

Intenta guardar el proyecto sin nombre. ¿La persona puede encontrar la explicación y volver al campo correspondiente sin perder otros datos válidos? El error debe indicar cómo corregirlo; un borde rojo por sí solo no da esa instrucción.

En las acciones destructivas, lee la etiqueta en su contexto. «Eliminar proyecto» comunica más que «Confirmar». El texto, la ubicación del foco y la opción para cancelar deben ayudar a tomar una decisión meditada, en lugar de depender solo del color de advertencia.

Devuelve el foco a un lugar adecuado

Al cerrar el cuadro para cambiar el nombre, normalmente el foco debería volver al control que lo abrió. Si la acción elimina ese control o el propio proyecto, elige un lugar lógico que permita continuar. Llevar el foco al inicio de la página puede desorientar justo después de completar la acción.

Documenta la secuencia revisada: abrir, recorrer, enviar contenido no válido, recuperarse, completar y volver. Así se obtiene un hallazgo concreto sobre la interacción, en lugar de afirmar en general que el cuadro es accesible porque su apariencia inicial parece correcta.

Referencias y lecturas adicionales

Sigue aprendiendo

Explora tu sitio web con Design Audit

Envía una URL y convierte la próxima revisión en un plan de acción concreto.