Los nodos de ARIA progressbar deben tener un nombre accesible

Cuando una barra de progreso carece de un nombre accesible, los usuarios que dependen de tecnologías de asistencia no tienen forma de distinguirla de otras barras de progreso en la página o entender su propósito. Imagina una página con dos barras de progreso: una para la subida de un archivo y otra para la instalación de software. Sin nombres accesibles, un usuario de lector de pantalla escucharía “barra de progreso” dos veces sin contexto para ninguna. Este problema afecta principalmente a usuarios ciegos o con baja visión, así como a usuarios con discapacidades motoras que pueden navegar usando comandos de voz que referencian nombres de elementos.

Esta regla se relaciona con el Criterio de Conformidad WCAG 1.1.1: Contenido no textual (Nivel A), que requiere que todo el contenido no textual tenga una alternativa textual que sirva para el propósito equivalente. Una barra de progreso es un indicador no textual de estado, por lo que necesita un nombre basado en texto para transmitir su significado a los usuarios de tecnologías de asistencia. Este criterio se aplica en WCAG 2.0, 2.1 y 2.2 en Nivel A, lo que significa que es un requisito básico.

Cómo solucionarlo

Asegúrate de que cada elemento con role="progressbar" tenga un nombre accesible significativo usando una de estas técnicas:

• aria-label — Proporciona una etiqueta concisa y descriptiva directamente en el elemento.
• aria-labelledby — Referencia el id de otro elemento que contiene texto de etiqueta visible.
• title — Usa el atributo title como alternativa (aunque se prefieren aria-label o aria-labelledby).

El nombre debe describir claramente qué proceso o tarea representa la barra de progreso, como “Progreso de subida de archivo” o “Progreso de instalación.”

Ejemplos

Incorrecto: Barra de progreso sin nombre accesible

Una barra de progreso sin atributos de etiquetado se anuncia de forma genérica sin contexto.

<div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
</div>

Incorrecto: aria-label vacío

Un aria-label vacío no proporciona ningún nombre, por lo que la barra de progreso permanece sin etiquetar.

<div role="progressbar" aria-label="" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
</div>

Incorrecto: aria-labelledby apuntando a un elemento inexistente o vacío

Si el elemento referenciado no existe o no tiene contenido de texto, la barra de progreso aún no tiene nombre accesible.

<div role="progressbar" aria-labelledby="missing-id" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
</div>

<!-- O referenciando un elemento vacío -->

<div role="progressbar" aria-labelledby="empty-label" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
</div>
<div id="empty-label"></div>

Correcto: Usando aria-label

<div role="progressbar" aria-label="Progreso de subida de archivo" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
</div>

Un lector de pantalla anunciará algo como: “Progreso de subida de archivo, barra de progreso, 50%.”

Correcto: Usando aria-labelledby

<h3 id="upload-heading">Subiendo resume.pdf</h3>
<div role="progressbar" aria-labelledby="upload-heading" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
</div>

Este enfoque es especialmente útil cuando un encabezado o etiqueta visible ya describe la barra de progreso, manteniendo sincronizados los nombres visual y accesible.

Correcto: Usando title

<div role="progressbar" title="Progreso de instalación" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
</div>

El atributo title funciona como un mecanismo de nomenclatura, pero ten en cuenta que también puede producir una información sobre herramientas al pasar el cursor. Prefiere aria-label o aria-labelledby cuando sea posible para una experiencia más consistente entre tecnologías de asistencia.

Learn more:

Deque Reference

Deque University - How To Fix

→