Índice de páginas
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
Variantes #
Por defecto
Posición de paginación: 10 - 20 de 64
Variante con selector
Selecciona para cargar datos automáticamente
Posición de paginación: 0 - 10 de 64
Por defecto #
Se recomienda su uso para clasificar contenido muy controlable, es decir, cuando sepamos que el número de páginas no será superior a 10.
Variante con selector #
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. La persona puede navegar entre páginas a través del selector y los botones de siguiente, anterior, última o primera. También se permite configurar cuantos resultados se muestran en cada una.
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 <button> con id único. El botón con la página actual tiene aria-current=page y aria-disabled=true.
En el caso de la variante con selector, un elemento <select> se encuentra entre los botones. Tiene un aria-describedby que llama al párrafo inicial.
El componente contiene por defecto etiquetas <span> sólo visibles para lectores de pantalla que amplían la información de cada botón: [Página:] 2 [(resultados del 20 al 30)]
. Otras elementos como los botones de la variante con selector y la cantidad de resultados por página también tienen estas etiquetas.
| 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.