TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
Definir role="progressbar" junto con los atributos de estado numérico no es suficiente. Sin un aria-label o aria-labelledby explícito, el lector de pantalla enunciará "60%" pero la persona usuaria no sabrá si está subiendo un archivo, procesando un pago o esperando un temporizador.
La ansiedad del porcentaje sin contexto
Los componentes de carga dinámica son puntos críticos de estrés para cualquier persona usuaria. Para quienes no pueden ver la pantalla, escuchar repetitivamente "20%... 40%..." sin saber a qué proceso corresponde, viola la WCAG 4.1.2 Nombre, Función, Valor y puede llevarlos a abortar la operación por inseguridad.
El patrón erróneo: Código Accesible Deficiente
La barra técnica está bien construida a nivel de valores, pero carece absolutamente de identidad.
<!-- MAL: Valores dinámicos presentes, pero falta nombre accesible -->
<div role="progressbar"
aria-valuenow="60"
aria-valuemin="0"
aria-valuemax="100">
<div class="fill" style="width: 60%;"></div>
</div>La Solución Accesible: Código Recomendado
El simple añadido de un aria-label descriptivo transforma una barra numérica anónima en una promesa clara del sistema.
<!-- BIEN: Nombre programático explícito acoplado a los valores -->
<div role="progressbar"
aria-label="Subiendo documento de identidad"
aria-valuenow="60"
aria-valuemin="0"
aria-valuemax="100">
<div class="fill" style="width: 60%;"></div>
</div>Metodología de Verificación y Testing
Pruebas Manuales con Lectores de Pantalla
Con NVDA activo, tabular hasta el componente ARIA personalizado. Verificar que el lector de pantalla anuncie correctamente el rol, nombre y estado actual. Si alguno de estos tres elementos falta o es incorrecto, la persona usuaria no podrá operar el componente de forma predecible.
Inspección del Árbol de Accesibilidad
En Chrome DevTools, seleccionar el elemento afectado en el panel Elements, luego abrir la pestaña Accessibility. Verificar que las propiedades Role, Name y State reflejen correctamente la intención del componente según el criterio WCAG 4.1.2.
Herramientas Automatizadas
Ejecutar Axe DevTools: las reglas aria-* y *-name detectan violaciones del Criterio 4.1.2 (Nombre, Función, Valor). WAVE marca controles sin nombre accesible. Limitación: La sincronización de estados dinámicos (JS) no siempre es verificable de forma automatizada.
