Grilla

Ejemplo

Vista real construida con los archivos compilados de Ally.

<div class="ally-grid">
<article class="ally-card col-ally-12 col-ally-md-4">
<strong>4 columnas</strong>
</article>
<article class="ally-card col-ally-12 col-ally-md-4">
<strong>4 columnas</strong>
</article>
<article class="ally-card col-ally-12 col-ally-md-4">
<strong>4 columnas</strong>
</article>
</div>

Contrato accesible

Propósito

Organiza contenido en una grilla responsive de 12 columnas.

Clases CSS

.ally-grid 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

No altera el orden de foco ni el orden de lectura del DOM.

Estados

Responsive, fluido y contenido según el componente.

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-grid">Contenido sin elemento semántico, nombre accesible ni estados asociados.</div>