Feedback

Progress bar

Expone progreso con elemento progress o role progressbar.

.ally-progressMVP 1.0Accesible por defecto

Ejemplo

Vista real construida con los archivos compilados de Ally.

Progreso de auditoría: 68%68%

<div>
<label for="progress-demo">Progreso de auditoría: 68%</label>
<progress class="ally-progress" id="progress-demo" max="100" value="68">68%</progress>
</div>

Contrato accesible

Propósito: Expone progreso con elemento progress o role progressbar.
Clases CSS: .ally-progress y modificadores de estado documentados.
HTML: Elemento semántico correspondiente, heading o nombre accesible y controles nativos.
ARIA: Elemento progress nativo o role progressbar con valores.
Teclado: Tab sigue el orden lógico; los elementos nativos conservan su comportamiento estándar.
Foco: No mueve el foco automáticamente salvo que la corrección requiera acción inmediata.
Estados: info, success, warning, error, loading y dismissed.
Ally Debug: Valida estructura, nombres, relaciones, controles y estados detectables dentro del scope.

Estados y variantes

defaultfocusactivedisablederror

Los estados visibles deben acompañarse de texto, atributos nativos o propiedades ARIA; nunca dependen solo del color.

Prueba obligatoria: semántica, teclado, foco visible, zoom al 200%, contraste, reduced motion y lector de pantalla.

No hacer

<div class="ally-progress">Contenido sin elemento semántico, nombre accesible ni estados asociados.</div>

Un contenedor genérico con una clase visual no reemplaza la semántica, el nombre accesible ni la gestión de estados.