Alertas

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

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

Ejemplo tomado de alertas de Bootstrap.

Los mensajes de alerta deben incluir role="alert" para avisar 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 enviado un formulario con éxito.

Proporcionar información cuando el usuario completa una acción es una característica esencial para la accesibilidad, tanto si se ha producido algún error como si se ha realizado con éxito.

Nota: role="alert" lleva implícito el atributo aria-live="assertive", lo que significa que cuando el mensaje aparece, interrumpe cualquier otra lectura que esté realizando el lector de pantalla.

Ver más información en WAI-ARIA Authoring Practices 1.1 - Alert.