Saltar al contenido principal

Alertas

Las alertas proporcionan mensajes contextuales importantes para el usuario.

Ejemplo
HTML
<div class="alert" role="alert">
    <strong>Aviso:</strong> El formulario no puede enviarse porque hay 1 error de validación.
</div>

Los mensajes de alerta deben incluir el rol alert, que avisa a las tecnologías asistivas de que se ha generado un mensaje que requiere la atención del usuario.

Ejemplos de mensajes de alerta:

  • Se han introducido valores no válidos en un formulario.
  • El tiempo para realizar una acción está a punto de terminar.
  • Se ha perdido la conexión a Internet.

Nota: El rol alert es intrusivo y solo debe usarse para mensajes importantes que requieren la atención inmediata del usuario. Para mensajes dinámicos menos urgentes pueden utilizarse los roles live regions.

Uso del color en los mensajes

Si se utiliza color para añadir significado al mensaje se deben tener en cuenta dos cosas:

  1. El color de fondo y de texto deben tener suficiente contraste.
  2. El color solo proporciona una indicación visual. La información indicada por el color debe ser evidente a partir del contenido del mensaje.