Pagination

Pagination is a horizontal set of links to navigate paginated content.

Page navigation navigation

Pagination provides a structured set of links to help users navigate paginated content.

Each link has a clear and succinct text label that informs users which page the link will go to
There is a visual cue for the current page, e.g. the white text against a blue background

The current page is visually distinguished by styling its page number differently from the others, for example, using a blue background with white text
The text for the Pagination controls must meet the minimum contrast requirements of 4.5:1
Ensure the visual cue for the current link has a contrast ratio of at least 3:1 against the background color
The Pagination controls must have a visible focus style. A custom focus style should be used as the browser's default focus style is often hard to see against some backgrounds. A custom focus style must have a minimum contrast ratio of 3:1 against the background

Each Pagination link has a minimum target size of 24 by 24 CSS pixels to support users with motor impairments

The Pagination component remains readable and usable without horizontal scrolling, at a viewport size of 320 by 256 CSS pixels
Text can be increased up to 200% and remain readable
Text spacing, and other text properties, can be overridden and content remains readable

When Pagination is used for dynamic in-page updates (e.g. client-rendered content), focus must be programmatically moved to the updated content so screen reader users are made aware of the change
The accessible names of Pagination links must be descriptive so users understand their purpose
The current page is indicated using aria-current="page" so screen readers can announce it appropriately

This component is rendered as a <nav> navigation landmark region, with an accessible name of "Pagination",

<nav … aria-label="Pagination">…</nav>

This makes the breadcrumb navigation easily discoverable for screen reader users who navigate via page landmarks
Each link is automatically given an aria-label which includes "Page" in addition to the visible label, for example, aria-label="Previous Page" and aria-label="Page 1"
The link that represents the current page is automatically given an aria-current="page"
The style for the current page indicator meets the minimum color contrast requirement
The arrow icons are decorative, so they are not exposed to screen readers
Links meet the minimum target size requirement of 24 by 24 CSS pixels

When the individual page links are shown, do not use narrow: false to hide them on narrow viewports. Content and functionality that is available at a wide viewport must also be available at a narrow viewport. This is to ensure that low vision users that zoom the page do not lose functionality and to avoid failing 1.4.10 Reflow
When Pagination adds content dynamically to the page, move focus to the beginning of the new content
When Pagination reloads the page, there is no need for any focus management

If the page number links are visible at a wide viewports, they are not hidden at narrow viewports
If Pagination dynamically adds content to the page, focus management is implemented so that keyboard users can efficiently navigate to the new content and screen reader users don't miss any new content
If Pagination is used for regular page navigation/reloading, no focus management is implemented

The Pagination component is exposed as a navigation landmark with an appropriate name/label
The page number link that matches the current page is programmatically identified as a link to the current page using aria-current="page"
The text remains readable and does not require horizontal scrolling when resized or zoomed to a viewport of 320px
The Pagination links meet the minimum target size requirement of 24×24 CSS pixels