Pestañas

Ejemplo

Vista real construida con los archivos compilados de Ally.

<div class="ally-tabs">
<div class="ally-tablist" role="tablist" aria-label="Información">
<button class="ally-tab" id="page-pestanas-tab-1" type="button" role="tab" aria-selected="true" aria-controls="page-pestanas-panel-1">Resumen</button>
<button class="ally-tab" id="page-pestanas-tab-2" type="button" role="tab" aria-selected="false" aria-controls="page-pestanas-panel-2">Accesibilidad</button>
</div>
<div class="ally-tabpanel" id="page-pestanas-panel-1" role="tabpanel" aria-labelledby="page-pestanas-tab-1">
<p>Componentes listos para usar.</p>
</div>
<div class="ally-tabpanel" id="page-pestanas-panel-2" role="tabpanel" aria-labelledby="page-pestanas-tab-2" hidden>
<p>Navegación por teclado y foco visible.</p>
</div>
</div>

Contrato accesible

Propósito

Alterna paneles con roles tablist/tab/tabpanel.

Clases CSS

.ally-tabs y modificadores de estado documentados.

HTML

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

ARIA

roles tablist, tab y tabpanel; aria-selected y relaciones por IDs.

Teclado

Flechas, Home y End cambian foco; Enter o Space activa.

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