alert
Región activa que transmite un mensaje urgente y sensible al tiempo. Los lectores de pantalla lo anuncian de inmediato, interrumpiendo la locución actual. Debe usarse con moderación — reservado para errores y advertencias genuinas; el abuso provoca fatiga en las tecnologías de asistencia.
Cuándo utilizarlo
Para mensajes que interrumpen genuinamente al usuario — un envío de formulario fallido, una sesión a punto de caducar, una pérdida de conexión. role="alert" equivale a aria-live="assertive" más aria-atomic="true", lo que significa que el lector de pantalla detiene lo que esté anunciando y lee la alerta a continuación.
Debe usarse con moderación. Los anuncios asertivos interrumpen la tarea actual del usuario; activar uno por cada campo guardado o acción exitosa resulta intrusivo. Para cambios de estado no urgentes, se debe usar role="status" (aria-live="polite") en su lugar.
La regla más importante: el elemento de alerta DEBE existir en el DOM antes de que se inserte el mensaje, y el contenido DEBE añadirse (no mostrarse desde oculto) para que se dispare el anuncio. Insertar <div role="alert">Error</div> desde cero no es fiable en los distintos lectores de pantalla. El patrón seguro: renderizar un <div role="alert"></div> vacío al cargar la página y luego actualizar su contenido de texto cuando ocurra una alerta.
Cuándo usar alert frente a status
Usar role="alert" | Usar role="status" |
|---|---|
| Errores de validación de formulario | «Artículo añadido al carrito» |
| Sesión a punto de caducar | Recuento de resultados de búsqueda actualizado |
| Conexión perdida | Indicador «Guardado» |
| Pago fallido | Carga completada |
Errores frecuentes
- El elemento de alerta se añade al DOM junto con el mensaje — muchos lectores de pantalla no lo anuncian.
- Alternar
hiddenen una alerta prerrellenada. El cambio en el contenido de texto es lo que desencadena el anuncio; alternar la visibilidad por sí solo puede no funcionar. - Usar
role="alert"para estados rutinarios. Satura al usuario con interrupciones. - Insertar múltiples alertas rápidamente — los mensajes posteriores se encolan detrás de los anteriores, a veces durante decenas de segundos.
- Un mensaje de alerta que no identifica el campo ni la causa — «Error» por sí solo no sirve de nada. «La dirección de correo electrónico es obligatoria.» sí es accionable.
- Colocar
role="alert"en un contenedor alrededor de un formulario y esperar que los cambios internos sean anunciados. Solo los cambios en el propio texto del elemento de alerta disparan el anuncio.
Ejemplo
<!-- Renderizar esto vacío al cargar la página -->
<div role="alert" id="formErr"></div>
<script>
// Al fallar el envío:
document.getElementById('formErr').textContent =
'La dirección de correo electrónico es obligatoria.';
</script>