Criterios de Robusto
RobustoPauta 4.1 Compatible
4.1.3Mensajes de estado
Nivel AALo exige la normativa (EN 301 549).
Qué pide
Los mensajes de estado se anuncian sin mover el foco.
A quién ayuda: Usuarios de lector de pantalla.
Un caso real
Al añadir un producto al carrito aparece «Producto añadido».
BienEl mensaje está en una región aria-live o role="status", y se anuncia.
MalEl mensaje aparece en pantalla pero el lector de pantalla no lo dice.
Cómo aplicarlo en código
Aviso anunciado sin mover el foco
La región con role="status" tiene que existir en la página antes de escribir el mensaje; si se crea a la vez, muchos lectores no lo anuncian.
<button type="button" id="anadir">Añadir al carrito</button>
<p role="status" id="aviso-carrito"></p>
<script>
document.getElementById("anadir").addEventListener("click", () => {
document.getElementById("aviso-carrito").textContent =
"Producto añadido. Tienes 3 productos en el carrito.";
});
</script><script>
// Se ve en pantalla, pero el lector de pantalla no dice nada
const aviso = document.createElement("div");
aviso.textContent = "Producto añadido";
document.body.append(aviso);
</script>Cómo comprobarlo
Activa un lector de pantalla y lanza acciones que muestren avisos.