Pagination

La Paginación divide un listado largo en páginas y permite moverse entre ellas. Se complementa con el filtro “Mostrar N”, que define cuántos resultados se ven por página.

Propiedades y configuraciones

Cuando usarlo

Úsala al pie de listados largos que la persona recorre por partes: resultados de búsqueda de trámites, historial de solicitudes, oficinas, licitaciones o beneficios. Acompáñala del filtro “Mostrar N” cuando la persona pueda querer ver más resultados de una vez.

Si el contenido es corto, muéstralo completo sin paginar. Para avanzar por las etapas de un formulario usa Stepper, y para cambiar de sección dentro de una ficha usa Tabs.

Buenas prácticas

Recomendado: Indica cuántos resultados hay y dónde está la persona

Acompaña la paginación con un resumen del total y marca siempre la página actual.

Recomendado: Usa la elipsis cuando hay muchas páginas

Con más de siete páginas, muestra las primeras, la elipsis y la última en vez de listar todos los números.

Recomendado: Ofrece el filtro “Mostrar N” en listados que se revisan en detalle

Deja que la persona elija cuántos resultados ver por página y ubica el filtro junto a la paginación.

Recomendado: Deshabilita los controles que no llevan a ninguna parte

En la primera página, “Anterior” y “Primera página” van deshabilitados, para que la persona entienda que está en el borde del listado.

Malas prácticas

No recomendado: No pagines listados cortos

Dividir pocos resultados en páginas obliga a hacer clics innecesarios. Si el listado cabe en pantalla, muéstralo completo.

No recomendado: No muestres todos los números de página

Una fila con muchos números es difícil de recorrer y rompe el layout en pantallas angostas. Usa la variante con elipsis.

No recomendado: No uses el Counter para cambiar de página

La variante Counter ajusta una cantidad (personas, copias), no navega entre las páginas de un listado.

No recomendado: No quites la referencia a la página actual

Si ninguna página aparece marcada, la persona no sabe en qué parte del listado está ni cuánto le falta.

Recomendaciones de accesibilidad

Envuelve la paginación en un <nav> con nombre
Usa <nav class="cl-pagination" aria-label="Paginación"> (o un nombre más específico, como “Paginación de resultados”) para que se encuentre como región de navegación.

Marca la página actual con aria-current="page"
La página actual lleva aria-current="page", que además aplica el estilo de marca. No la indiques solo con color.

Da nombre accesible a los controles de ícono
Los botones con chevrons o flechas dobles solo muestran un ícono: cada uno necesita aria-label (“Página anterior”, “Primera página”, etc.) y el ícono aria-hidden="true".

Usa disabled real en los controles sin destino
Deshabilita con el atributo disabled los controles que no llevan a otra página, para que no reciban foco ni se anuncien como disponibles.

Oculta la elipsis a las tecnologías de asistencia
La elipsis (...) es decorativa y lleva aria-hidden="true"; complementa con un resumen visible del total de páginas o resultados.

Etiqueta el filtro de resultados por página
El selector “Mostrar N” lleva aria-label="Mostrar resultados por página". Al cambiarlo, lleva el foco o un anuncio al inicio del listado actualizado.

Gestiona el foco al cambiar de página
Si la página se actualiza sin recargar, mueve el foco al título o al inicio de los resultados para que quien usa lector de pantalla no quede al pie del listado anterior.