Contador

Ejemplo

Vista real construida con los archivos compilados de Ally.

<div class="ally-counter stack-r ally-align-center" data-min="0" data-max="10" data-value="2">
<button class="ally-btn" type="button" data-ally-counter-decrement aria-label="Disminuir">−</button>
<output data-ally-counter-output aria-live="polite">2</output>
<button class="ally-btn" type="button" data-ally-counter-increment aria-label="Aumentar">+</button>
</div>

Contrato accesible

Propósito

Actualiza una cantidad mediante output/live region.

Clases CSS

.ally-counter y modificadores de estado documentados.

HTML

Elemento semántico correspondiente, heading o nombre accesible y controles nativos.

ARIA

Usa HTML nativo primero y añade nombre, estado o relaciones ARIA solo cuando el patrón lo requiera.

Teclado

Tab recorre controles; Enter o Space incrementa o disminuye.

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

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

Accesibilidad

No hacer

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