Addaw, ir a inicio Donar

Técnica ARIA WCAG 2.2

ARIA25Anunciar el progreso de una subida de archivos con una región activa

Nombre oficial en el W3C: Usar una región activa de ARIA para transmitir el estado de una barra de progreso

En pocas palabras

Mientras se sube un archivo, una barra muestra cuánto falta. Quien usa lector de pantalla no se entera de ese avance si no se le anuncia. La solución es repetir el progreso en un texto dentro de una región activa (aria-live), que el lector lee sin que el foco se mueva.

Por qué es importante

Al subir el PDF de una solicitud, una persona ciega no ve avanzar la barra. No sabe si la subida va bien, se ha parado o ha terminado.

Una barra con role="progressbar" guarda su valor, pero los lectores de pantalla no avisan cuando cambia. Hace falta un mensaje de estado en una región activa (zona cuyos cambios se leen automáticamente).

Cómo se hace

  1. Muestre el progreso con <progress> o con un elemento con role="progressbar" y sus valores (aria-valuenow, aria-valuemin, aria-valuemax).
  2. Añada desde la carga un contenedor con aria-live="polite" o role="status". Puede ocultarlo a la vista con una clase como sr-only.
  3. Escriba en él el avance con JavaScript: «Subida al 50 %».
  4. No lo actualice a cada instante. Hágalo cada cierto porcentaje, por ejemplo cada 25 %, para no saturar.
  5. Al terminar, anuncie el resultado: «Archivo subido correctamente».
  6. No mueva el foco a la barra ni al mensaje.

Cómo comprobarlo

  1. Busque en la página barras de progreso que cambian solas, como las de subir archivos.
  2. Active un lector de pantalla y empiece una subida.
  3. Compruebe que se anuncian los avances y el final sin que el foco se mueva.
  4. En el código, confirme que el texto del progreso está en un contenedor con aria-live o role="status" desde la carga.

Ejemplo

Barra de subida con un aviso oculto que el lector de pantalla anuncia al cambiar.

<label for="subida">Progreso de la subida</label>
<progress id="subida" max="100" value="50">50 %</progress>
<p id="aviso-subida" class="sr-only" aria-live="polite">Subida al 50 %</p>

<script>
  // Cada 25 %, actualizar el aviso:
  document.getElementById('aviso-subida').textContent = 'Subida al 75 %';
</script>
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 ARIA25 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 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

  1. Verificar si la página contiene una barra de progreso que cambia dinámicamente para transmitir visualmente información de estado al usuario.
  2. 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 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.

Solicitar una auditoría

Basado en la técnica ARIA25 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.