Paginador

Ejemplo

Vista real construida con los archivos compilados de Ally.

<nav class="ally-pagination" aria-label="Paginación de resultados">
<ul>
<li>
<button class="ally-btn ally-btn-small" type="button" data-page="1">1</button>
</li>
<li>
<button class="ally-btn ally-btn-small" type="button" data-page="2" aria-current="page">2</button>
</li>
<li>
<button class="ally-btn ally-btn-small" type="button" data-page="3">3</button>
</li>
</ul>
</nav>

Contrato accesible

Propósito

Permite navegar por páginas y anuncia la actual.

Clases CSS

.ally-pagination y modificadores de estado documentados.

HTML

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

ARIA

nav nombrado y aria-current="page".

Teclado

Tab recorre controles; Enter activa la página.

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