Core · Navegación
Paginación
Enlaza a las páginas de una lista que se extiende a lo largo de varias páginas y marca la página actual.
Ejemplo
Los enlaces de una lista de 40 páginas, con la actual marcada.
Problemas conocidos
No se conocen problemas.
Código
Copiar el marcado
<nav aria-label="Pagination">
<ul class="luz-pagination">
<li><a class="luz-pagination__link" href="/blog/?page=1" rel="prev">Previous</a></li>
<li><a class="luz-pagination__link" href="/blog/?page=1" aria-label="Page 1">1</a></li>
<li><a class="luz-pagination__link" href="/blog/?page=2" aria-label="Page 2" aria-current="page">2</a></li>
<li><a class="luz-pagination__link" href="/blog/?page=3" aria-label="Page 3">3</a></li>
<li><a class="luz-pagination__link" href="/blog/?page=3" rel="next">Next</a></li>
</ul>
</nav>Variantes y opciones
No hay modificadores. En pantallas estrechas, la lista ocupa más líneas.
| Clase o atributo | Qué hace |
|---|---|
.luz-pagination | La lista: una fila de elementos que salta de línea en pantallas estrechas |
.luz-pagination | Una página, Anterior o Siguiente: un área interactiva de al menos 44 px |
aria-current="page" | Marca la página actual con un relleno sólido y un peso de fuente mayor |
aria-disabled="true" | Anterior o Siguiente en los extremos, como <span> y no como enlace: color de texto desactivado |
.luz-pagination | La «…» de una lista larga: una marca oculta a los lectores de pantalla |
Cómo funciona
Un punto de referencia <nav> alrededor de una lista de enlaces, con estilos de components/pagination.css. Cada página tiene una dirección propia, así que el servidor la genera y funcionan el botón Atrás, los marcadores y los motores de búsqueda.
Sin JavaScript.
- Los números son enlaces, no botones: al seguir uno, se carga otra página.
rel="prev"yrel="next"indican qué enlaces llevan a las páginas anterior y siguiente.- La página actual es un enlace con
aria-current="page", así que se sigue anunciando como enlace y conserva su posición en el orden. - En la primera o la última página, Anterior o Siguiente es un
<span>conaria-disabled="true": solo texto, sin parada de foco. - Conserva el
<nav>. Algunos navegadores eliminan la semántica de lista de un<ul>sin viñetas, y el punto de referencia hace que siga anunciándose como lista; si no hay<nav>, añaderole="list"al<ul>.
Sin JavaScript
No cambia nada: es una lista de enlaces con CSS. Sin CSS, se lee como una lista de enlaces.
Teclado y ARIA
Pulsa Tab para llegar a cada enlace en orden y Enter para abrirlo.
- Asigna al elemento
<nav>el nombre «Paginación» conaria-label, para distinguirlo de la navegación principal. - Asigna a un número el nombre «Página 3» con
aria-label. El número visible sigue formando parte del nombre.aria-current="page"indica al lector de pantalla cuál es la página actual, así que no hace falta incluirlo en el nombre. - Marca el espacio con
aria-hidden="true": el lector de pantalla oye las páginas, no los puntos.
El contraste y el foco están en la pestaña Diseño.
Diseño
Cuándo usarlo
Usa la paginación cuando una lista sea demasiado larga para una sola página y se pueda acceder a cada página con su propia dirección: resultados de búsqueda, archivo de un blog o tabla de registros.
Cuándo no usarlo
No uses la paginación para una lista corta ni para los pasos de una tarea.
- Para las páginas superiores a la actual, usa migas de pan.
- Para las secciones de una página, usa pestañas.
- Si tienes un flujo que se carga al desplazarse, ofrece también un enlace a la página siguiente: es la única versión a la que pueden llegar quienes usan teclado o lector de pantalla.
Qué hacer y qué no
Cómo escribir el contenido
Usa la palabra que diría quien lee.
- «Anterior» y «Siguiente», no solo flechas ni «Atrás».
- Escribe los números de página con cifras; para tecnologías de asistencia, asígnales el nombre «Página 3».
- Indica el número total de páginas cerca de la lista («Página 8 de 40») cuando sea importante.
Contraste y foco
Las páginas usan el color de texto secundario; la página actual aparece en blanco sobre un relleno sólido del color de marca.
| Parte | Color sobre el fondo | Claro | Oscuro | Alto contraste | Requisitos |
|---|---|---|---|---|---|
Enlace | --luz-text-secondary on --luz-surface-page | 6.2:1 | 7.5:1 | 19.3:1 | 4.5:1 |
Enlace al pasar el puntero | --luz-text-primary on --luz-surface-hover | 14.4:1 | 12.6:1 | 20.1:1 | 4.5:1 |
Página actual | --luz-text-on-fill on --luz-brand-fill | 6.0:1 | 4.9:1 | 14.1:1 | 4.5:1 |
Relleno de la página actual | --luz-brand-fill on --luz-surface-page | 5.6:1 | 3.5:1 | 14.1:1 | 3:1 |
Anterior o Siguiente en el extremo | --luz-text-disabled on --luz-surface-page | 3.5:1 | 4.2:1 | 5.3:1 | 3:1 |
Espacio | --luz-text-muted on --luz-surface-page | 4.9:1 | 5.6:1 | 9.0:1 | 4.5:1 |
Anillo de foco | --luz-focus-ring on --luz-surface-page | 5.6:1 | 7.7:1 | 21.0:1 | 3:1 |
Medido a partir de los valores de los tokens de cada modo, redondeado hacia abajo. Los requisitos son los mínimos de WCAG 2.2 AA: 4,5:1 para el texto y 3:1 para los anillos de foco, los bordes, los iconos y el estado desactivado.
- Foco: cada enlace tiene el anillo compartido: un contorno de 2 px
--luz-focus-ring, a 2 px del elemento. - No solo color: la página actual tiene un relleno sólido, un peso mayor (600) y
aria-current. - Colores forzados: la página actual usa los colores de selección del sistema (
HighlightyHighlightText) y un anillo de foco enCanvasText; los extremos que no son enlaces usanGrayText.
Tokens que usa
Los 15 tokens que lee components/pagination.css, agrupados por familia. Cada familia enlaza a su página, con los valores de cada modo. En Figma son variables con los mismos nombres: consulta Tokens en Figma.
- Color
--luz-brand-fill,--luz-surface-hover,--luz-surface-pressed,--luz-text-disabled,--luz-text-muted,--luz-text-on-fill,--luz-text-primary,--luz-text-secondary- Spacing and sizing
--luz-control-lg,--luz-space-sm,--luz-space-xs- Typography
--luz-font-sans,--luz-text-md- Radius
--luz-radius-md- Motion
--luz-duration-fast
El teclado y ARIA están en la pestaña Código.