OneTaskBy Tim King · Updated
Pagination Builder
Accessible Page Number Navigation in HTML and CSS
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Pagination Builder works
A pagination builder makes the row of page numbers under a list of results, with previous and next links, gaps for skipped pages and the current page highlighted. Set the page count and current page, pick a style, and copy the accessible HTML and CSS.
Pagination splits long lists such as search results, blog archives and product grids into pages, which keeps each page fast and gives visitors a sense of how much is left. The first and last page are always shown, with a few pages either side of the current one and an ellipsis for the rest.
How the pagination builder stays accessible
The links sit in a <nav> labelled "Pagination", so screen reader users can find them in the
landmarks list. The current page carries aria-current="page", which is announced as "current
page", and each number has a label such as "Page 8" so it makes sense out of context. On the first
and last page the previous or next control becomes plain text with aria-disabled instead of a dead
link.
Links, not buttons
Each page is a real link to ?page=N, so it works without JavaScript, can be opened in a new tab
and can be crawled by search engines. Change the address pattern to match your site, for example
/blog/page/2/.
FAQ
How many page numbers should I show?
One or two either side of the current page is enough for most sites. More numbers make the row wrap on phones and are rarely used, because visitors usually step forward one page at a time or jump to the first or last page.
Should I use pagination or infinite scroll?
Pagination suits content people want to find again or reach the footer of, such as shops and archives, because each page has its own address. Infinite scroll suits feeds read once from top to bottom. A "Load more" button sits between the two.
Do paginated pages need canonical tags?
Give each page its own self-referencing canonical tag rather than pointing them all at page one, otherwise search engines may skip the items on later pages. Keep the page titles slightly different, for example by adding "Page 2".
What happens on narrow screens?
The row wraps onto a second line if it runs out of room. To keep it on one line on phones, lower the number of pages shown either side of the current page, or hide the words Previous and Next and keep the arrows.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Breadcrumb Generator
Build accessible breadcrumb navigation with optional BreadcrumbList schema.
Tabs Builder
Build accessible tabs with arrow key support and three styles.
Card Builder
Design a card component and copy its HTML and CSS.
Animated Dropdown
Build an accessible dropdown menu with a fade, slide or scale animation.
Mega Menu
Build an accessible full-width mega menu with link columns and a promo.