Cuadro de diálogo

Este componente informa a los usuarios de una tarea y puede contener información crítica o simplemente informativa sobre algo que ha ocurrido y que es importante que el usuario sepa.

Vista Previa

Figma

Usos

Cuándo usar

Para centrar la atención del usuario.

Completar tareas cortas.

Recopilar información del usuario.

Mostrar información relevante.

Cuándo no usar

Si el contenido no está relacionado con el flujo de trabajo actual.

Para mostrar grandes cantidades de datos o complejos.

Cuando el usuario no haya activado el cuadro de modal.

Un modal modal nunca debe activar otro modal. Si la primera tarea modal depende de un modal de confirmación para aprobar, esa primera tarea no debe realizarse en un modal.

Buenas prácticas

Usar los modales con moderación. Son perjudiciales y pueden molestar fácilmente al usuario si se usan de forma incorrecta o con demasiada frecuencia.

Los modales deben ser iniciados por el usuario, por ejemplo tras hacer clic en un botón. No interrumpa al usuario abriendo un cuadro de modal cuando no lo esté esperando. Evite las ventanas emergentes generadas por el sistema que distraen al usuario mientras trabaja. Los disparadores pueden ser una consecuencia directa o indirecta de la acción de un usuario. Un ejemplo de una acción indirecta es un usuario que cierra una pestaña con contenido no guardado que luego hace que un cuadro de modal le pregunte si desea guardar sus cambios antes de cerrar.

Mantener las tareas de modal simples. Las tareas de modal deben ser directas y fáciles de completar.

Evitar apilar modales unos encima de otros. Limitar el número de interacciones en un modal modal.

Etiquetar los elementos con verbos de acción que indiquen lo que sucede cuando se selecciona el elemento.

Comportamiento

Variantes por contenido

Visualización del cuadro de dialogo de lectura

Only read: Ofrece al usuario una información relacionada con el flujo actual pero no tiene acciones que el usuario deba realiza

With actions :Requiere que el usuario complete acciones. Contiene un botón de cancelar y otro de acción principal. Solo debe haber una acción principal por modal.

Accesibilidad

Este componente ha sido validado para cumplir con los requisitos de accesibilidad la UNE-EN 301549:2022 en la que se engloban los criterios de la WCAG 2.1 (AA), sin embargo, los cambios del contenido y estilos pueden afectar al cumplimiento de la accesibilidad. Debemos de asegurarnos de revisar y seguir las directrices de esta sección cuando actualice o añada nuevo contenido o estilo a este componente.

El Modal utiliza role="dialog" y aria-modal="true" para transmitir a los usuarios de tecnologías de apoyo que funciona como las ventanas de diálogo nativas.

Cuando se cierra un modal, el foco vuelve al botón que lo activó.

La propiedad title se utiliza para mostrar un título en el modal. El modal marca esto como la etiqueta del modal cuando se utiliza. Esto ayuda a los usuarios de lectores de pantalla, por lo que es una propiedad obligatoria.

El modal atrapa el foco mientras está abierto y los usuarios no pueden navegar fuera del modal antes de que éste se cierre.

Pulsando esc se cierra la ventana modal.

El label del aspa de cierre se define a través de la propiedad aria-label-close que por defecto tiene el valor "Cerrar".

A través de la propiedad h-size se define la etiqueta de encabezado correspondiente.