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.
Accessibility and usability expectations
Presentation
Cognition
- 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
Vision
- 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
Mobility
- Each
Pagination
link has a minimum target size of 24 by 24 CSS pixels to support users with motor impairments
Adaptability
- 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
Interaction
Keyboard
- Each link is focusable using the
Tab
key - Each link can be activated by pressing the
Enter
key - Each link has a focus indicator when it receives keyboard focus
Engineering for AT Compatibility
Screen reader
- 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
Speech recognition
- Each link has an accessible name that matches or includes the visible label
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"
andaria-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
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 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
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