Técnica ARIA WCAG 2.2
ARIA22Usar role=status para presentar mensajes de estado
En resumen
Cuando una página muestra un aviso que no recibe el foco (resultados de una búsqueda, número de artículos del carrito...), quien usa un lector de pantalla puede no enterarse. Esta técnica coloca ese texto en un contenedor con role="status", ya presente en la página, para que la tecnología de asistencia lo anuncie de forma educada, sin interrumpir. Es la vía habitual para cumplir el criterio 4.1.3 Mensajes de estado.
Ejemplo práctico
Ficha de producto de una tienda online con un indicador de la cesta que se actualiza al pulsar «Añadir a la cesta», sin recargar la página ni mover el foco.
Así no: Contador de la cesta que cambia en silencio
El número de productos se actualiza en pantalla, pero el contenedor no es una región activa: el lector de pantalla no dice nada al pulsar el botón y no hay confirmación de que el producto se haya añadido. Para notarlo, active NVDA o VoiceOver y pulse el botón.
<p id="cesta" class="cesta">Cesta: 0 productos</p>
<h2>Aceite de oliva virgen extra, 1 l</h2>
<p>8,95 €</p>
<button type="button" id="anadir">Añadir a la cesta</button>
<style>
.cesta { font-weight: bold; color: #412c56; }
h2 { font-size: 1.1em; margin: .5em 0 .2em; }
</style>
<script>
var n = 0;
document.getElementById('anadir').addEventListener('click', function () {
n++;
document.getElementById('cesta').textContent = 'Cesta: ' + n + (n === 1 ? ' producto' : ' productos');
});
</script>
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Así sí: Mensaje de estado con role="status"
El contenedor lleva role="status" y aria-atomic="true" desde la carga: cada cambio se anuncia de forma educada, sin interrumpir ni mover el foco, y se lee el texto completo («Cesta: …»), no solo el número que cambia.
<p id="cesta" class="cesta" role="status" aria-atomic="true">Cesta: 0 productos</p>
<h2>Aceite de oliva virgen extra, 1 l</h2>
<p>8,95 €</p>
<button type="button" id="anadir">Añadir a la cesta</button>
<style>
.cesta { font-weight: bold; color: #412c56; }
h2 { font-size: 1.1em; margin: .5em 0 .2em; }
</style>
<script>
var n = 0;
document.getElementById('anadir').addEventListener('click', function () {
n++;
document.getElementById('cesta').textContent = 'Cesta: ' + n + (n === 1 ? ' producto' : ' productos');
});
</script>Pruébelo aquí:
Cómo comprobarlo
Errores frecuentes en auditorías
- Añadir role="status" al contenedor en el mismo momento en que se escribe el mensaje, cuando ya es tarde para que se anuncie.
- Poner role="status" a un contenedor que incluye toda la lista de resultados, de modo que se lee entera en cada actualización.
- Usar role="alert" para confirmaciones rutinarias («Producto añadido»), que interrumpe lo que se esté leyendo.
- Dejar fuera del contenedor el contexto visual (icono de la cesta, etiqueta «Cesta:») y anunciar solo un número sin significado.
Técnica completa: traducción al español del texto del W3C
Descripción
Esta técnica usa la función (role) status de la especificación ARIA para notificar a las tecnologías de asistencia cuando el contenido se ha actualizado con información sobre el estado del usuario o de la aplicación. Esto se hace añadiendo role="status" al elemento que contiene el mensaje de estado. La función de región activa (live region) de ARIA status tiene un valor implícito de aria-live igual a polite, lo que permite que el usuario sea notificado a través de la tecnología de asistencia (como un lector de pantalla) cuando se añaden mensajes de estado. La función status también tiene un valor predeterminado de aria-atomic igual a true, de modo que las actualizaciones del contenedor marcado con la función status harán que la tecnología de asistencia presente al usuario todo el contenido del contenedor, incluidas las etiquetas definidas por el autor (o los elementos anidados adicionales). Este contexto adicional puede ser fundamental cuando el texto del mensaje de estado por sí solo no proporciona un equivalente a la experiencia visual. El contenido del contenedor aria-live es leído automáticamente por la tecnología de asistencia, sin que esta tenga que situar el foco en el lugar donde se muestra el texto. Consulte WAI-ARIA status (role) para más detalles.
Tenga en cuenta que, dado que actualmente role="status" no se trata como atómico de forma predeterminada en algunos entornos, es recomendable añadir un aria-atomic="true" explícito si debe anunciarse todo el contenido del contenedor.
Ejemplos
Incluir un mensaje con los resultados de una búsqueda
Después de que el usuario pulse un botón de búsqueda, el contenido de la página se actualiza para incluir los resultados de la búsqueda, que se muestran en una sección debajo del botón. El cambio de contenido también incluye el mensaje "5 results returned" (se han devuelto 5 resultados) cerca de la parte superior de este nuevo contenido. A este texto se le asigna una función apropiada para un mensaje de estado. Un lector de pantalla anunciará "5 results returned".
<div role="status" aria-atomic="true">5 results returned.</div>Actualizar el estado del carrito de la compra
Después de que el usuario pulse un botón de añadir al carrito de la compra, el contenido situado junto al icono del carrito se actualiza para mostrar "1 items" (1 artículos). El contenedor de este texto (en este caso un <p>) está marcado con role="status". Como aporta contexto visual, la imagen del carrito de la compra, con un texto alt breve y preciso, también se coloca dentro del contenedor. Gracias al valor de aria-atomic, un lector de pantalla anunciará "Shopping cart, six items" (carrito de la compra, seis artículos).
<p role="status" aria-atomic="true">
<img src="shopping-cart.png" alt="Shopping Cart">
<span id="cart">0</span> items
</p>
Pruebas
Procedimiento
Para cada mensaje de estado:
- Comprobar que el contenedor destinado a albergar el mensaje de estado tiene un atributo
rolecon el valorstatusantes de que se produzca el mensaje de estado. - Comprobar que, cuando se desencadena el mensaje de estado, este se encuentra dentro del contenedor.
- Comprobar que los elementos o atributos que proporcionan información equivalente a la experiencia visual del mensaje de estado (como una imagen de carrito de la compra con un texto
altadecuado) también residen en el contenedor.
Resultados esperados
- Las comprobaciones n.º 1, n.º 2 y n.º 3 son verdaderas.
Cómo lo comprobamos en ADDAW
En las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.
Fuente y licencia
Traducción al español, no oficial, realizada por ADDAW a partir de la técnica ARIA22 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.
