Técnica ARIA WCAG 2.2
ARIA25Usar una región activa de ARIA para transmitir el estado de una barra de progreso
En resumen
Una barra de progreso (por ejemplo, la de subida de un archivo) informa visualmente de cómo avanza una tarea, pero los lectores de pantalla no anuncian los cambios de aria-valuenow. Esta técnica añade un contenedor oculto visualmente con aria-live="polite" cuyo texto se actualiza a la vez que la barra, de modo que el progreso se anuncia sin mover el foco. Úsela en subidas, descargas, instalaciones o cualquier proceso largo.
Descripción
Esta técnica muestra cómo usar una región activa (live region) de ARIA para transmitir por software a las tecnologías de asistencia el estado de una barra de progreso de subida de archivos.
Ejemplo
Este ejemplo simula el progreso de la subida de un documento. El progreso de la subida se comunica visualmente al usuario con una barra de progreso. A medida que la barra de progreso se actualiza, también se actualiza un texto en un contenedor oculto visualmente. Este contenedor tiene un atributo aria-live="polite". Este atributo indica a los lectores de pantalla que anuncien las actualizaciones realizadas en el contenido del elemento.
El siguiente ejemplo usa un elemento con un atributo role="progressbar". Los valores aria-valuemin, aria-valuemax y aria-valuenow del componente progressbar comunican por software el progreso de la subida, pero, como la función progressbar no es una región activa, los lectores de pantalla no anunciarán las actualizaciones de esos valores cuando cambien. El uso de una barra de progreso de ARIA no es realmente lo importante en esta técnica: lo que importa es que el progreso se transmita mediante un mensaje de estado.
El siguiente código también puede verse como un ejemplo funcional.
<div class="upload-container">
<p id="upload-progress-label">Uploading document: <strong>report.pdf</strong></p>
<div
aria-labelledby="upload-progress-label"
role="progressbar"
aria-describedby="progress-text"
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="0"
id="upload-progress"></div>
<button id="start-upload" type="button">Start Upload</button>
<div aria-live="polite" class="visually-hidden" id="progress-text">0% complete</div>
</div>Pruebas
Procedimiento
- Verificar si la página contiene una barra de progreso que cambia dinámicamente para transmitir visualmente información de estado al usuario.
- Con un lector de pantalla, comprobar que las actualizaciones de la barra de progreso se transmiten al usuario sin que el foco se mueva por software a la barra de progreso o al mensaje de estado
Resultados esperados
- Las comprobaciones n.º 1 y n.º 2 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 ARIA25 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.
