Diseño Normalizado de Trámites Electrónicos
Inicio
Primeros pasos
Primeros pasos
¿Qué es DINTEL?
Diseñadores
Desarrolladores
Recursos
Preguntas frecuentes
Fundamentos
Fundamentos
Color
Tipografía
Elevaciones
Espaciado
Retícula
Borde
Radio
Iconografía
Ilustraciones
Animación
Accesibilidad
Tokens de diseño
Contenidos digitales
Visualización de datos
Elementos de interfaz
Elementos de interfaz
Módulos
Plantillas
Componentes
Actualizaciones
Contacto
Elementos de interfaz
Componentes
Cuadro de diálogo
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.
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
Only read
Ofrece al usuario una información relacionada con el flujo actual pero no tiene acciones que el usuario deba realizar.
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.
Este sitio web utiliza cookies propias y de terceros para ofrecer un mejor servicio. Si continúa navegando consideramos que acepta su uso.
