Datos

Stepper

Presenta pasos con estado actual y completado.

.ally-stepperMVP 1.0Accesible por defecto

Ejemplo

Vista real construida con los archivos compilados de Ally.

Configurar
Revisar
Finalizar

Configurar proyecto

Define el alcance de la auditoría.

<div class="ally-stepper">
<ol class="ally-stepper-list stack-r">
<li>Configurar</li>
<li>Revisar</li>
<li>Finalizar</li>
</ol>
<section class="ally-step ally-panel" data-ally-step aria-current="step">
<h3>Configurar proyecto</h3>
<p>Define el alcance de la auditoría.</p>
</section>
<section class="ally-step ally-panel" data-ally-step hidden>
<h3>Revisar</h3>
<p>Verifica los datos ingresados.</p>
</section>
<section class="ally-step ally-panel" data-ally-step hidden>
<h3>Finalizar</h3>
<p>Confirma la configuración.</p>
</section>
<div class="stack-r">
<button class="ally-btn" type="button" data-ally-step-prev>Anterior</button>
<button class="ally-btn ally-btn-primary" type="button" data-ally-step-next>Siguiente</button>
</div>
</div>

Contrato accesible

Propósito: Presenta pasos con estado actual y completado.
Clases CSS: .ally-stepper y modificadores de estado documentados.
HTML: Elemento semántico correspondiente, heading o nombre accesible y controles nativos.
ARIA: aria-current="step" para el paso activo.
Teclado: Tab recorre acciones; Enter avanza o retrocede.
Foco: Mantiene foco estable durante actualizaciones y navegación.
Estados: empty, loading, selected, current, complete y error.
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-stepper">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.