Los nodos ARIA progressbar deben tener un nombre accesible

Cuando una barra de progreso carece de un nombre accesible, los usuarios que dependen de tecnologías asistivas 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 de las dos. Este problema afecta principalmente a usuarios ciegos o con baja visión, así como a usuarios con discapacidades motrices que pueden navegar usando comandos de voz que referencian nombres de elementos.

Esta regla se relaciona con WCAG Criterio de Éxito 1.1.1: Contenido no textual (Nivel A), que requiere que todo contenido no textual tenga una alternativa textual que sirva 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 asistivas. 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 — Hace referencia al id de otro elemento que contiene texto de etiqueta visible.
• title — Usa el atributo title como respaldo (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

Error: 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>

Error: aria-label vacío

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

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

Error: 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 sigue sin tener nombre accesible.

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

<!-- O referenciar 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 curriculum.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 los nombres visual y accesible sincronizados.

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 un tooltip al pasar el cursor. Prefiere aria-label o aria-labelledby cuando sea posible para una experiencia más consistente entre tecnologías asistivas.

Learn more:

Deque Reference

Deque University - How To Fix

→