Inicio/Sistema de diseño/Diálogo modal

Diálogo modal Sistema de diseño

Mantenga las decisiones enfocadas y las líneas de cierre sean fáciles de encontrar.

6 comprobaciones · 2 grupos de contenido

Contenido de la lista

Estructura y significado Interacción y usabilidad

Progreso de la revisión

Estructura y significado

Comparar información y presentación en contexto de uso.

Indique claramente el propósitoUtilice títulos y descripciones que indiquen la decisión o información a procesar.Abra el cuadro de diálogo con el teclado, revise todos los controles y luego ciérrelo. Mantenga el foco en el cuadro de diálogo; al cerrar, devuelve el nodo abierto y conserva el contexto detrás.Ejemplo El cuadro de diálogo nombra el borrador y tiene "Mantener borrador", "Eliminar borrador"; Después de cancelar, el foco vuelve al botón de eliminación original.Distinguiendo la acción principal.Dar nombres específicos a las confirmaciones y cancelaciones; Explique las consecuencias si la acción es difícil de deshacer.El nodo maestro debe decir qué hará, especialmente con la eliminación o pérdida de datos; Las acciones de cancelación deben ser fáciles de encontrar, pero no tienen el mismo peso.Gestiona el enfoque en el lugar correctoEnfoque el cuadro de diálogo, mantenga presionado Tab en él y regrese el foco al botón Abrir cuando esté cerrado.Elige el enfoque inicial según la tarea: área de contenido a leer o primer campo a ingresar. Cuando está cerrado, devuelve el control correcto que abrió el modal.

Interacción y usabilidad

Pruebe la operación, cambie el estado y continúe trabajando.

Hay una línea de cierre claraProporcionar un cierre de botón fácilmente identificable y Escape cuando corresponda; Explica si no puedes irte todavía.Lo indicado antes de Escape o presionar en segundo plano puede eliminar los datos no guardados; No utilice una posición cercana pequeña que esté cubierta por una barra de desplazamiento o un teclado.Separado del contenido detrásAclara el fondo y evita la manipulación del backend mientras el cuadro de diálogo está abierto.No se debe hacer clic en el contenido subyacente ni acceder a él mediante el teclado; cuando se abre el modal, se debe mantener el estado de desplazamiento de fondo para la renderización.Mantenga la operación cuando la pantalla sea estrecha.Permita desplazamientos largos de contenido y asegúrese de que los títulos y botones aún sean accesibles.Prueba de contenido extenso y teclado virtual; Se debe poder acceder a los títulos, errores y acciones en pantallas estrechas sin desplazamiento horizontal.

El progreso se guarda automáticamente en este navegador.

GUÍA

Cómo revisar

Verifique la posición del enfoque al abrir y cerrar

Abra el cuadro de diálogo con el teclado, revise todos los controles y luego ciérrelo. Mantenga el foco en el cuadro de diálogo; al cerrar, devuelve el nodo abierto y conserva el contexto detrás.

EJEMPLOS

Ejemplos de uso

Confirmar la eliminación de un borrador

El cuadro de diálogo nombra el borrador y tiene "Mantener borrador", "Eliminar borrador"; Después de cancelar, el foco vuelve al botón de eliminación original.