a11y tips #4: paginación y migas de pan accesibles

La paginación es una funcionalidad omnipresente en los sitios web prácticamente desde los orígenes de la Web. Podemos encontrarla en blogs, sitios de comercio electrónico, directorios de personas, archivos de noticias en medios de comunicación y, en definitiva, en cualquier tipo de sitio web que muestre listas de resultados.

A pesar de su aparente simplicidad, crear sistemas de paginación accesibles requiere implementar ciertas características que permitan a los usuarios que dependen de lectores de pantalla o navegan exclusivamente mediante el teclado hacerlo sin barreras.

Qué es la paginación en un sitio web

El objetivo de los sistemas de paginación es permitir a los usuarios desplazarse por un conjunto de páginas sin abrumarlos con una cantidad excesiva de resultados (registros, productos, artículos, personas, etc.).

Quedan fuera del alcance de esta guía las recomendaciones de accesibilidad y usabilidad orientadas a determinar cuál es el número adecuado de resultados por página que debe mostrar cada tipo de sistema, así como los datos que conviene incluir en cada resultado para que los usuarios puedan evaluarlos de forma efectiva.

Características de los sistemas de paginación

Generalmente, presentan la apariencia de enlaces o botones (simulados) numerados junto a unas flechas en una u otra dirección que permiten avanzar secuencialmente.

En algunos otros casos, se utilizan sólo las formas «Anterior» y «Siguiente» acompañadas o no de sus respectivas flechas.

Consideraciones de diseño

• El color del texto de los enlaces debe presentar suficiente contraste con el fondo.
• El color de las flechas –en el caso de que se utilicen– debe presentar suficiente contraste con el fondo.
• El diseño visual debe sugerir que se trata de elementos interactivos.

Requisitos de accesibilidad

• Evita el uso de elementos <button>. La aproximación más correcta desde un punto de vista semántico son los enlaces. Los enlaces (elementos <a> con un atributo href) indican de forma natural cambios de ubicación (hipertexto) y resultan más fáciles de interpretar por parte de los usuarios de ayudas técnicas como parte del flujo de navegación de la página.
• Utiliza una estructura <nav> y, dentro de esta, una lista (<ul> – <li>).
• Añade semántica al elemento navegacional (<nav>) mediante WAI-ARIA. Concretamente, utiliza un aria-label para etiquetar con un nombre descriptivo ese bloque. Por ejemplo: «Navegación de la paginación», «Navega por los resultados», etc. También puedes utilizar la combinación aria-labelledby="paginacion" con un elemento HTML que incluya esa misma información, sea visible en la página o no, pero que, en cualquier caso, debe estar disponible para los lectores de pantalla.
• Si utilizas un <nav> no es necesario añadir el role=navigation.
• Utiliza también WAI-ARIA para etiquetar los enlaces de navegación anterior y siguiente: aria-label="Página anterior" y aria-label="Página siguiente".
• En el caso de paginaciones numeradas, indica con WAI-ARIA cuál es la página de resultados en la que se encuentra el usuario en cada momento: aria-current="page".

Migas de pan o breadcrumbs

Las migas de pan o hilos de Ariadna –en inglés, breadcrumbs– pueden entenderse también como un sistema de paginación. En este caso, muestran al usuario la jerarquía del sitio web, indicando la ruta desde la página de inicio hasta la página en la que se encuentran.

Los requisitos de accesibilidad no varían demasiado. Aquí también recomendamos el uso de un bloque de navegación <nav> y, dentro de este, una lista, aunque en este caso ordenada (<ol>). El elemento <nav> requiere como en casos anteriores una etiqueta semántica, por ejemplo, aria-label="Ruta de navegación". El elemento de la lista que contiene la referencia a la página en la que se encuentra el usuario, debe incorporar el atributo aria-current="page".

Código HTML y CSS

Ejemplo de paginación numerada

Ejemplo de paginación «Anterior – Siguiente»

Ejemplo de migas de pan

Referencias

W3C (2025). Pagination. En W3C Design system. https://design-system.w3.org/components/pagination.html