DESY

Sistema de Diseño del Gobierno de Aragón.

Notificaciones

Las notificaciones se emplean para dar un mensaje de actualización o para destacar alguna información sobre la que queremos llamar la atención.

Índice de apartados de esta página

Anatomía

Etiqueta de texto

Descripción de la notificación.

Siempre debe contar con una etiqueta de texto que explique de forma clara la información que se quiera transmitir. El color debe utilizarse para apoyar el mensaje, con el mismo criterio se puede emplear un icono a la izquierda alineado a la parte superior. También existe la posibilidad de incluir una "x" accionable en la esquina superior derecha que permita eliminar la notificación.

Variantes

Por defecto

Éxito

Informativo

Link

Por defecto

Se emplea de manera estándar, especialmente para informar sobre actualizaciones del sistema (el documento se ha cargado correctamente, …) y es de color azul.

Éxito

Este tipo es de color verde e incluye un icono de check, se utiliza cuando se quiere informar de que una acción ha sido completada correctamente.

Alerta

Es de color rojo y aparece un icono de alerta, se emplea cuando se quiere llamar especialmente la atención del usuario, por ejemplo, para errores de la aplicación, información muy importante, información que implica una barrera para realizar una acción, etc.

Informativo

Se emplea el color azul también y se emplea habitualmente para transmitir algún tipo de información relevante y relacionado con alguna acción: “Debido a la situación por Covid-19, pide cita previa para acudir a nuestras oficinas.”, por ejemplo.

Accesibilidad

Cómo funciona

Contenedor que puede tener un encabezado de nivel configurable, un id a nivel de componente y otro para el título, una lista <ul> de items <li>, una etiqueta button con aria-label que permite cerrar la notificación, y unos iconos configurados con role=img y aria-label según la variante.

Este componente se lanza a través de un alert que necesita los atributoos "role": "alert" y "aria-live": "assertive", para que el lector de pantalla interrumpa la acción y salte al título de la alerta.

Basado en el patrón alert de W3C

Qué tener en cuenta
Qué usar Dónde Función
id Parámetro Nunjucks dentro del componente Añade identificadores únicos para el contenedor de la notificación y su título
role=img y aria-label En el SVG personalizado Describe el tipo de modal que se está lanzando.
role=alert y aria-live=assertive Dentro del parámetro Nunjucks attributes cuando se utiliza un alert para lanzar la notificación. El lector de pantalla interrumpe la acción y salta al título de la alerta.
onClick: openDialog(id1, this, id-2) En el parámetro Nunjucks button del componente alert, dentro de attributes. Ejecuta la función openDialog, que permite lanzar la notificación. El primer parámetro de esta función es el id del contenido a mostrar, el segundo parámetro es el nodo que debe tomar foco al cerrar el dialog, y el tercer elemento es el id del elemento al que se le da el foco al abrir el contenido (suele ser el título de la notificación).

Buenas prácticas

  • Se recomienda no abusar de su uso. A la vez no se recomienda mostrar más de 3 notificaciones, en caso de ser necesario podrían agruparse varios mensajes en una única notificación.
  • Mensajes escuetos y claros.
  • Si están referenciadas a una acción que quede claro a cual se refieren con el uso de las mismas fórmulas.
  • Si son de error, que quede claro dónde se ha producido e info de como solucionarlo.