...
Key Content
Item | Type | Notes | |
Link | Alt text | Links will need appropriate alt text
| |
Link |
| *for the current page | |
Link |
| ||
Button | Alt text |
| |
Nav | aria-label |
|
Behaviour
...
<nav> |
|
Behaviour
Pagination should be an <ol> wrapped in <nav>
Non JS
I don’t think there is a non-Js JS version of pagination
Pagination could the non-JS fallback for other list types.
Links will navigate you to a new page of results.
Links open in the same window
The current page number is highlighted as the active page number.
Editorial
X
X
X
Accessibility
...
Key
...
Interaction
...
Aria considerations
...
N/A
Accessibility
As a user:
I should be able to navigate by keyboard.
I should be able to know that there is a pagination navigation when scanning the page with a screen reader.
Each navigation item should be read as "Goto Page 1".
I need to know which element is currently active.
I need to navigate with Next and Previous links.
Source: https://www.a11ymatters.com/pattern/pagination/
| Note |
|---|
To make pagination even more accessible, should be consider using “Previous“ and “Next“ labels in stead of chevrons? |
Analytics & Data
XN/A
X
Related/Similar Components
List controls
Load more
Carousel
Future Expansion
XN/A
X
Wider Conversations that may impact this
Item: Description
Item: Description
Inspiration from elsewhere
X
X
Examples
Insert here
...
Lists: Where controls and logic for lists sit
Inspiration from elsewhere
...
Examples
...