Hero

Ejemplo

Vista real construida con los archivos compilados de Ally.

<section class="ally-hero">
<span class="ally-badge">Ally 1.0</span>
<h2>Construye interfaces accesibles desde el inicio</h2>
<p>HTML, CSS y JavaScript progresivo con auditoría integrada.</p>
<div class="stack-r">
<a class="ally-cta ally-cta-primary" href="#comenzar">Comenzar</a>
<a class="ally-btn" href="#componentes">Ver componentes</a>
</div>
</section>

Contrato accesible

Propósito

Presenta el mensaje principal y su CTA.

Clases CSS

.ally-hero 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 introduce controles invisibles ni altera el orden lógico.

Estados

default, hover, focus, active y disabled cuando corresponda.

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