Cookie banner

Ejemplo

Vista real construida con los archivos compilados de Ally.

<section class="ally-cookie docs-position-static" aria-label="Preferencias de cookies">
<h3>Tu privacidad importa</h3>
<p>Usamos cookies necesarias y, con tu permiso, analíticas.</p>
<div class="stack-r">
<button class="ally-btn ally-btn-primary" type="button" data-ally-cookie-accept>Aceptar</button>
<button class="ally-btn" type="button" data-ally-cookie-reject>Rechazar</button>
<button class="ally-btn" type="button" data-ally-cookie-customize>Personalizar</button>
</div>
<div data-ally-cookie-preferences hidden>
<label class="ally-checkbox">
<input type="checkbox"> Analítica opcional</label>
</div>
</section>

Contrato accesible

Propósito

Solicita consentimiento con aceptar, rechazar y preferencias.

Clases CSS

.ally-cookie y modificadores de estado documentados.

HTML

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

ARIA

Región nombrada y botones con acciones inequívocas.

Teclado

Tab recorre aceptar, rechazar y preferencias.

Foco

Foco visible y predecible; overlays devuelven el foco al control que los abrió.

Estados

closed, open, active, selected, expanded, disabled y loading según aplique.

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