Alerta

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

Alerta

Las alertas son notificaciones directas con los usuarios, se utilizan para dar feedback urgente de algo que esta sucediendo en la aplicación. Pero también pueden ser molestas si se usan en momentos inadecuados o en exceso.

Vista previa

Usos

En general, es importante usar alertas en una interfaz de manera estratégica y considerando el contexto de uso. Una buena práctica es limitar el número de alertas mostradas y permitir al usuario controlar la frecuencia o las notificaciones.

Cuándo usar

Cambios de estado o actualizaciones importantes.

Confirmación de una acción específica.

Eventos en segundo plano que se han finalizado o se ha producido un problema.

Cuándo no usar

No es una situación importante o urgente.

La información puede ser mostrada de manera menos intrusiva, como en un estado de la interfaz o en una barra de estado.

Puede molestar al usuario o interrumpir su flujo de trabajo.

Se usan demasiadas alertas, lo cual puede causar que el usuario las ignore.

Comportamiento

El componente alerta aparece integrado en el contenido e implica un aviso que puede desaparece automáticamente tras un periodo de tiempo o mediante click del usuario.

Escogeremos el tipo de alerta en función del tipo de aviso: error, información, éxito o alerta. Utilizaremos las alertas siempre y cuando sea necesario, sin saturar de información al usuario.

En el mensaje mostraremos la información precisa de lo que está ocurriendo, adaptándose a la situación particular en cada caso.

Tipos

Simple

Visualización del componente alerta con título

With title

Visualización del componente alerta con link

With link

Estados

Info

Visualización del componente alerta en estado advertencia

Warning

Error

Visualización del componente alerta en estado exitoso

Success

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.

Las alertas de peligro y advertencia tienen definido un role="alert" que garantiza que las tecnologías de asistencia las anuncien cuando aparezcan.

Las variaciones de las alertas por defecto y de éxito tienen definido un role="status". Esto garantiza que se lean después de las alertas de peligro y advertencia.

Las alertas utilizan además tabindex="0" para que sea posible acceder a ellas con la tecla tabulador o mover el foco a ellas mediante programación.

A través de la propiedad h-size el desarrollador puede elegir la etiqueta de encabezado apropiada para el título de la alerta.

El aspa de cierre tiene role="button" además de la propiedad aria-label.

Este sitio web utiliza cookies propias y de terceros para ofrecer un mejor servicio. Si continúa navegando consideramos que acepta su uso.

Aviso legal

Accesibilidad

Política de Cookies

Contacto

Mapa web