Cómo crear alertas accesibles con Bootstrap o Tailwind

Las alertas y notificaciones son esenciales en cualquier web: mensajes de éxito, errores en formularios, advertencias o confirmaciones. Sin embargo, muchas veces estos avisos solo son visuales y no llegan a usuarios de lectores de pantalla o desaparecen demasiado rápido, impidiendo su lectura.

En este post veremos cómo implementar alertas accesibles con Bootstrap y Tailwind, aplicando roles y atributos ARIA correctamente.

Problemas comunes en alertas

Mensajes solo visuales → Se muestran en pantalla, pero no se anuncian al lector de pantalla.
Sin roles ARIA → Falta de role="alert" o aria-live.
Desaparecen demasiado rápido → Alertas automáticas que no dejan tiempo de lectura.
Dependencia del color → Solo un borde rojo para error, sin texto explicativo.
Foco mal gestionado → En errores críticos, el foco no se mueve al mensaje.

Alertas accesibles con Bootstrap 5

Bootstrap ya incluye clases y roles que ayudan a la accesibilidad web:

<!-- Alerta de éxito -->
<div class="alert alert-success" role="alert">
  ✅ Tu cuenta se ha creado correctamente.
</div>

<!-- Alerta de error -->
<div class="alert alert-danger" role="alert">
  ❌ Error: el correo electrónico ya está registrado.
</div>

<!-- Alerta de advertencia -->
<div class="alert alert-warning" role="alert">
  ⚠️ Recuerda verificar tu correo electrónico.
</div>

👉 Bootstrap añade estilos visuales y, al incluir role="alert", los lectores de pantalla anuncian automáticamente el mensaje.

Alertas accesibles con Tailwind

En Tailwind debemos construir el estilo y añadir atributos manualmente:

<!-- Alerta de éxito -->
<div role="alert" aria-live="polite"
     class="mb-4 rounded-md bg-green-100 border border-green-400 text-green-800 p-4">
  ✅ Tu cuenta se ha creado correctamente.
</div>

<!-- Alerta de error -->
<div role="alert" aria-live="assertive"
     class="mb-4 rounded-md bg-red-100 border border-red-400 text-red-800 p-4">
  ❌ Error: el correo electrónico ya está registrado.
</div>

<!-- Alerta de advertencia -->
<div role="alert" aria-live="polite"
     class="mb-4 rounded-md bg-yellow-100 border border-yellow-400 text-yellow-800 p-4">
  ⚠️ Recuerda verificar tu correo electrónico.
</div>

👉 Aquí aplicamos:

role="alert" → para que el mensaje se lea inmediatamente.
aria-live="polite" para mensajes informativos, aria-live="assertive" para errores críticos.
Estilos con contraste suficiente (bg-xxx-100, text-xxx-800).

Buenas prácticas para alertas accesibles

Usa role="alert" en todos los mensajes importantes.
Añade aria-live="polite" o assertive según la prioridad.
No dependas solo del color → incluye iconos y texto.
Evita que las alertas desaparezcan demasiado rápido.
Para errores en formularios, mueve el foco al mensaje de error.
Asegura contraste adecuado entre fondo y texto.

Conclusión

Las alertas accesibles son esenciales para que todos los usuarios reciban feedback claro sobre lo que ocurre en la web.

En Bootstrap, basta con usar las clases alert y role="alert".
En Tailwind, debemos aplicar los roles y atributos manualmente, cuidando contraste y semántica.