Acordeón

Ejemplo

Vista real construida con los archivos compilados de Ally.

<div class="ally-accordion" data-ally-single>
<button class="ally-accordion-trigger" type="button" aria-expanded="true" aria-controls="page-acordeon-acc-1">¿Qué es Ally?</button>
<div class="ally-accordion-panel" id="page-acordeon-acc-1">
<p>Un framework frontend accesible con auditoría integrada.</p>
</div>
<button class="ally-accordion-trigger" type="button" aria-expanded="false" aria-controls="page-acordeon-acc-2">¿Necesita dependencias?</button>
<div class="ally-accordion-panel" id="page-acordeon-acc-2" hidden>
<p>No. Funciona con HTML, CSS y JavaScript.</p>
</div>
</div>

Contrato accesible

Propósito

Expande y contrae paneles mediante botones.

Clases CSS

.ally-accordion y modificadores de estado documentados.

HTML

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

ARIA

aria-expanded y aria-controls en botones reales.

Teclado

Enter o Space expande; flechas, Home y End recorren cabeceras.

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