Saltar al contenido principal

Alertas

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

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

Nota: 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.

Ejemplo
HTML
<button id="alert-trigger" class="btn btn-brand">
    Activar Alerta
</button>
<div id="example" class="alert alert-danger" role="alert"></div>
<!-- Contenido que será incluido dentro del elemento alert. -->
<script type="text/template" id="alert-template">
    Aviso: Este es solo un ejemplo de alerta. Las alertas normalmente se activan ante algún evento, como un error o un suceso importante.
</script>
CSS
.alert {
    border: 1px solid transparent;
    border-radius: 3px;
    margin: 1em 0;
    padding: 1em;
}

.alert-danger {
    background-color: #f9d9d9;
    border-color: #e35656;
}

[role="alert"]:empty {
    display: none;
}
JavaScript
/*
* This content is licensed according to the W3C Software License at
* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
*/
window.addEventListener('load', function () {

  var button = document.getElementById('alert-trigger');
  button.addEventListener('click', addAlert);

});

function addAlert (event) {

  var example = document.getElementById('example');
  var template = document.getElementById('alert-template').innerHTML;
  example.innerHTML = template;

}

Aviso: 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.