Pagination

Accessibility and usability expectations

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

When Pagination is used for dynamic content, where in-page content changes and the page doesn't reload, focus must be programmatically moved to the new content. See focus management for more information.

When page number links are included in the Pagination, the current page is indicated. To convey this visually, the page number that represents the current page is styled differentlty to the other page numbers. For screen reader users, this information is conveyed programmatically through the use of the aria-current attribute in the rendered output.

The accessible names of the links are descriptive for screen reader users.

Every link must have a minimum target size of 24×24 CSS pixels. This is to ensure that the link is large enough to be easily activated by users with motor impairments.

The Pagination content must remain readable and not require horizontal scrolling when resized or zoomed to a view port of 320px.

Built-in accessibility features

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 colour contrast requirement.

The arrow icons are decorative, so they are not exposed to screen readers.

Links meet the minimum target size requirement of 24×24 CSS pixels.

Implementation requirements

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.

How to test the component

Integration tests

• If the page number links are visible at a wide viewports, they are not hidden at narow 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

Component tests

• 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