Sticky bar

Ejemplo

Vista real construida con los archivos compilados de Ally.

<aside class="ally-sticky docs-position-static" role="status">
<div class="stack-r ally-justify-between ally-align-center">
<span>
<strong>Modo revisión activo</strong> — los cambios no se publicarán.</span>
<button class="ally-btn ally-btn-small" type="button" data-ally-sticky-close>Cerrar</button>
</div>
</aside>

Contrato accesible

Propósito

Mantiene información visible sin cubrir contenido o foco.

Clases CSS

.ally-sticky 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 alcanza sus acciones sin cubrir contenido enfocado.

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