Alertas

Las alertas proporcionan mensajes contextuales breves e importantes para el usuario.

Contenido

Estructura de la alerta
Ejemplos de mensajes
Atributos WAI-ARIA

Estructura de la alerta

Las alertas están compuestas por un caja que contiene un texto, y están diseñadas de forma que atraigan la atención del usuario.

Las alertas aparecen de forma dinámica y son anunciadas por los lectores de pantalla.

Ejemplo: Alerta

El formulario se ha enviado con éxito.

<div class="alert alert-success" role="alert">
  El formulario se ha enviado con éxito.
</div>

Ejemplos de mensajes

Algunos ejemplos de mensajes de alerta son:

Se han introducido valores no válidos en un formulario.
El tiempo para realizar una acción está a punto de terminar.
Se ha completado una tarea con éxito.

Atributos WAI-ARIA

Los mensajes de alerta deben incluir role="alert" para avisar a las tecnologías de apoyo de que se ha generado un mensaje que requiere la atención del usuario.

Nota: Las alertas no deben afectar al foco para no interferir en la navegación por teclado.

Puedes ver más información en ARIA Authoring Practices Guide - Alert.