Técnica ARIA WCAG 2.2
ARIA22Anunciar mensajes de estado con role="status"
Nombre oficial en el W3C: Usar role=status para presentar mensajes de estado
En pocas palabras
Un mensaje de estado informa de un cambio sin mover el foco: «5 resultados», «Producto añadido a la cesta», «Guardado». Si su contenedor lleva role="status", el lector de pantalla lo lee cuando termina lo que está diciendo, sin interrumpir. Así nadie se queda sin saber qué ha pasado.
Por qué es importante
Quien ve la pantalla nota que el contador de la cesta cambia o que aparece «5 resultados». Quien usa lector de pantalla no se entera de ese cambio si nadie se lo anuncia.
Mover el foco hasta el mensaje tampoco es buena idea, porque la persona pierde su sitio. role="status" resuelve las dos cosas: avisa sin interrumpir y sin mover el foco.
Cómo se hace
- Ponga en el HTML inicial el contenedor del mensaje con
role="status". Debe existir antes de que cambie su contenido. - Añada
aria-atomic="true"para que se lea el mensaje entero y no solo la parte que cambia. Algunos navegadores no lo aplican por defecto. - Meta dentro todo lo que da sentido al mensaje, como la palabra «Cesta:» o el icono del carrito con su texto alternativo.
- Actualice con JavaScript solo el texto de ese contenedor.
- Use
role="status"para avisos rutinarios. Dejerole="alert"para errores urgentes.
Ejemplo práctico
Ficha de producto de una tienda online. Tiene un indicador de la cesta que cambia al pulsar «Añadir a la cesta». La página no se recarga y el foco no se mueve.
Así no: Contador de la cesta que cambia en silencio
El número de productos cambia en pantalla, pero el contenedor no es una región activa. El lector de pantalla no dice nada al pulsar el botón. La persona no sabe si el producto se ha añadido. Para notarlo, active NVDA o VoiceOver y pulse el botón.
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Ver el código del ejemplo incorrecto
<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>Así sí: Mensaje de estado con role="status"
El contenedor lleva role="status" y aria-atomic="true" desde la carga. Cada cambio se anuncia sin interrumpir y sin mover el foco. Además, se lee el texto completo («Cesta: …»), no solo el número que cambia.
Pruébelo aquí:
Ver el código del ejemplo correcto
<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>Cómo comprobarlo
Errores frecuentes en auditorías
- Añadir role="status" al contenedor en el mismo momento en que se escribe el mensaje. Ya es tarde para que se anuncie.
- Poner role="status" en un contenedor con toda la lista de resultados. Se lee entera en cada cambio.
- Usar role="alert" para confirmaciones rutinarias («Producto añadido»). Interrumpe lo que se esté leyendo.
- Dejar fuera del contenedor el contexto visual (icono de la cesta, palabra «Cesta:»). Solo se anuncia un número sin sentido.
Ver el texto completo del W3C (traducción al español)
Esta es una traducción no oficial al español de la técnica ARIA22 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web 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 cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.
Basado en la técnica ARIA22 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.