Alertas

Estructura de la alerta

Las alertas suelen estar compuestas por una caja que contiene un mensaje importante.

Estas aparecen de forma dinámica en la interfaz y deben incluir el atributo role="alert", que permite a las tecnologías de apoyo (como los lectores de pantalla) notificar al usuario sobre un mensaje que requiere su atención.

Ejemplo

Haz clic en el botón para activar la alerta.

Mostrar Alerta

<button type="button" id="alert-btn">Mostrar Alerta</button>
<div id="alert-placeholder"></div>

const alertBtn = document.querySelector("#alert-btn");
const alertPlaceholder = document.querySelector("#alert-placeholder");

alertBtn.addEventListener("click", () => {
  const alert = document.createElement("div");
  alert.className = "alert";
  alert.setAttribute("role", "alert");
  alert.innerHTML = "<p>Ejemplo de mensaje de alerta</p>";
  alertPlaceholder.appendChild(alert);
});

Usos de los mensajes de alerta

Los mensajes de alerta se utilizan para informar al usuario sobre situaciones que requieren su atención, como por ejemplo:

• Se han introducido valores no válidos en un formulario.
• El tiempo para completar una acción está a punto de agotarse.
• Se ha producido un error al enviar un formulario.