Pagination
Pagination allows users to navigate through a large set of data, such as tables, filtered lists or search results across multiple pages. Pagination helps users to find the information they need without overwhelming them with too much content at once.
On this page
Use Cases
User should be able to:
- Get insight into results size and current position
- Navigate back and forth through content
- Use single select to can change the amount of data displayed per page
- Tab through the pagination from left to right
Interaction and Style
Relevant WCAG Requirements
Info and Relationships
Ensure information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. This means use proper HTML elements to structure your content, so it makes sense when read by assistive technology.
WCAG 2.1 Understanding 1.3.1Keyboard
Ensure all functionality of the content is operable through a keyboard interface. This allows users who can't use a mouse or touchscreen to navigate and use your content.
WCAG 2.1 Understanding 2.1.1Name, Role, Value
For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.
WCAG 2.1 Understanding 4.1.2
- WCAG 2.4.8: Information about the user’s location within a set of Web pages is available
- WCAG 3.2.3: Navigation patterns follow a consistent pattern. Only position pagination component at the bottom of the page
- WCAG 2.4.3: Focus state receives focus in an order that preserves meaning
- WCAG 2.4.7: Focus is visible
- WCAG 2.5.5: Target size for pagination links are large enough for users to easily activate them
Keyboard Navigation
| Key | Action |
|---|---|
| Tab | Focuses on pagination controls. |
| Enter/Spacebar | Activates the focused control. |
Questions?
Connect with the DLS Team on Slack or by email.
Resources
Check out additional resources.