Saltar al contenido principal

Alertas

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

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;

}

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.