- The root is a
<nav> named with aria-label (default “Pagination”). When there are several Pagination components, give each a different name (label).
- Controls are in a list (
ul / li); screen readers announce the number of items.
- The current page has
aria-current="page"; it is not marked by the selected surface alone but also by a strong border.
- Page buttons are named like “Page 3”; the word “page” is read with the number. Previous and next are named “Previous” and “Next”; on narrow screens only the chevron shows but the name stays in
aria-label.
- The ellipsis is
aria-hidden and is not read.
- Controls at an end and while
disabled carry aria-disabled="true" and stay focusable, so focus is not lost.
- With
getPageHref, the page and chevron controls become links (<a href>) with role="link". An inactive link without an address has no role.
- The summary text sits in an
aria-live="polite" region; it is read when the range changes.
| Key |
Behaviour |
| Tab |
In order: page size select, previous, pages, next. Inactive ends take focus too. |
| Enter, Space |
Runs the focused button; Enter follows a link. |
| Down arrow, Enter |
While the page size select is open, moves between options (Select behaviour). |
The focus ring is 2 px wide and 2 px away. After a page change, focus stays on the clicked control. If the clicked page button goes away (for example when the page count shrinks), focus moves to the current page; it does not fall to the top of the page.
| Example |
Read |
| Landmark |
“Pagination, navigation” |
| Current page |
“Page 3, button, current page” |
| Another page |
“Page 4, button” |
| Previous on the first page |
“Previous, button, unavailable” |
| Summary |
“21-40 / 345” |
| Page size |
“Per page, combobox, 20” |
Text is at least 4.5:1 in every brand and mode; values are computed from the bigbang and fixture token output.
| Pair |
Light mode |
Dark mode |
color-text-default / color-surface-default |
16.16:1 |
17.18:1 |
color-text-default / color-surface-selected (current page) |
15.04:1 |
13.98:1 |
color-text-default / color-action-subtle-hovered |
14.40:1 |
13.49:1 |
color-text-subtle / color-surface-default (summary) |
8.77:1 |
10.27:1 |
color-border-strong / color-surface-default (current page border) |
4.63:1 |
7.14:1 |
color-focus-ring / color-surface-default |
5.97:1 |
8.09:1 |
The selected surface has a low ratio against the page, so the current page also carries a border above 3:1 and aria-current.
| Criterion |
How Pagination meets it |
What the product team does |
| 1.3.1 Info and relationships |
nav, a list and aria-current. |
Give several Pagination components different label values. |
| 1.4.1 Use of colour |
The current page is set apart by surface, border and aria-current. |
Do not show page state with another colour. |
| 1.4.11 Non-text contrast |
The current page border and the focus ring are at least 4.63:1. |
Do not pass custom colours. |
| 2.1.1 Keyboard |
Every control works with Tab and Enter. |
Do not change controls with tabIndex. |
| 2.4.3 Focus order |
The order is the visual order; focus is not lost on a page change. |
Use disabled while loading the new page; do not remove the controls. |
| 2.4.7 Focus visible |
A 2 px ring. |
Do not remove outline. |
| 2.5.8 Target size |
Items are at least 32 × 32 px. |
Do not shrink them. |
| 4.1.2 Name, role, value |
Each control has a name, state and role. |
Keep the number when you localise page names. |