DESY

Sistema de Diseño del Gobierno de Aragón.

Paginación

La paginación se emplea cuando dividimos el contenido de una página para no abrumar, esto dará una idea de qué cantidad de información está disponible y permitirá saltar fácilmente entre las páginas.

Índice de apartados de esta página

Anatomía

La navegación entre las páginas queda alineado a la izquierda y a la derecha colocamos un contador de elementos, opcionalmente se puede incluir un selector de items por página.

Variantes

Por defecto

Se recomienda su uso para clasificar contenido muy controlable, es decir, que sea posible saber el número de páginas en las que está clasificado el contenido y que este número de páginas no tenga posibilidad de crecer.

Estilo de listado en caja

Se recomienda su uso en el resto de casos, es decir, cuando el contenido de las páginas no es muy controlable y puede haber variaciones en cuanto a la cantidad de contenido o cuando el número de páginas supera las 10.

Accesibilidad

Cómo funciona

Rodeado con la etiqueta nav, debe tener un aria-label que describa el tipo de navegación.

Dentro se encuentra una lista sin orden ul con una serie de li que contienen un enlace con type=button marcado con un id único. La item con la página actual tiene un aria-current=page.

El componente contiene por defecto etiquetas sólo visibles para lectores de pantalla que amplía la información de cada botón: [Página:] 2 [(resultados del 20 al 30)].

Qué tener en cuenta
Qué usar Dónde Función
idPrefix Parámetro Nunjucks dentro del componente Permite crear id únicos para los items del listado
id Parámetro Nunjucks dentro del componente Permite crear un id para el componente.
active: true Parámetro Nunjucks dentro del item actual Añade aria-current=page y le da estilos al botón.
aria-label Dentro del parámetro Nunjucks attributes Descibe el tipo de navegación.

Buenas prácticas

  • Incluir el máximo de contenido posible por página, siempre y cuando no provoque una demora en mostrar el contenido.
  • Se recomienda que una vez el usuario entra en uno de los elementos de la página, al volver atrás, el sistema recuerde la posición del usuario respecto a las páginas del contenido.