Allyby Accessibility.cl v1.3.0
Ctrl /
Componentes
Datos

Timeline

Presenta eventos en orden cronológico semántico.

.ally-timelineMVP 1.0Accesible por defecto

Ejemplo

Vista real construida con los archivos compilados de Ally.

  1. Proyecto creado

    Se definió el alcance inicial.

  2. Auditoría ejecutada

    Se detectaron 4 hallazgos.

HTML
<ol class="ally-timeline">
<li>
<time datetime="2026-08-01">1 ago 2026</time>
<h3>Proyecto creado</h3>
<p>Se definió el alcance inicial.</p>
</li>
<li>
<time datetime="2026-08-03">3 ago 2026</time>
<h3>Auditoría ejecutada</h3>
<p>Se detectaron 4 hallazgos.</p>
</li>
</ol>

Contrato accesible

Propósito
Presenta eventos en orden cronológico semántico.
Clases CSS
.ally-timeline 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 sigue el orden lógico; los elementos nativos conservan su comportamiento estándar.
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.

Accesibilidad

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

No hacer

HTML
<div class="ally-timeline">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.