- Taxonomic name: A-PAGINATION
- Added on: v3.0.0 (15/09/17)
- Updated on: v5.0.0 (05/10/20)
Pagination
The pagination control is used to split content over a number of pages and guide users directly to either a particular page or to the next or previous page.
Design and usage
- Include a title that describes how many page links are being displayed, and the overall number of links, eg. 'Showing 1 of 15'.
- Consider whether pagination is required - undertake user research activity to understand what an optimum page length would be for your content; it may be longer than you think, as scrolling can be less onerous for users than navigating between pages, depending on the scenario.
- A maximum of nine page number links should be displayed in large and medium views.
- A maximum of five page number links should be displayed in a small view.
- Don't use 'first' and 'last' links.
- Must not be used on dark accent colours.
Examples
Interactive examples
Working example
Code example
<p class="u-text--center u-no-print">Showing ... of ...</p>
<nav class="a-pagination" aria-label="Pagination">
<ul class="a-pagination-list a-list-plain">
<li class="a-pagination-list__item a-pagination-list__item--previous"><a href="..." aria-label="Previous page, page ..."><span>Previous</span></a></li>
<li class="a-pagination-list__item a-pagination-list__item--tertiary"><a href="..." aria-label="Page ...">...</a></li>
<li class="a-pagination-list__item a-pagination-list__item--tertiary"><a href="..." aria-label="Page ...">...</a></li>
<li class="a-pagination-list__item a-pagination-list__item--secondary"><a href="..." aria-label="Page ...">...</a></li>
<li class="a-pagination-list__item a-pagination-list__item--primary"><a href="..." aria-label="Page ...">...</a></li>
<li class="a-pagination-list__item a-pagination-list__item--primary a-pagination-list__item--selected"><span aria-current="page" aria-label="Page ...">...</span></li>
<li class="a-pagination-list__item a-pagination-list__item--primary"><a href="..." aria-label="Page ...">...</a></li>
<li class="a-pagination-list__item a-pagination-list__item--secondary"><a href="..." aria-label="Page ...">...</a></li>
<li class="a-pagination-list__item a-pagination-list__item--tertiary"><a href="..." aria-label="Page ...">...</a></li>
<li class="a-pagination-list__item a-pagination-list__item--tertiary"><a href="..." aria-label="Page ...">...</a></li>
<li class="a-pagination-list__item a-pagination-list__item--next"><a href="..." aria-label="Next page, page ..."><span>Next</span></a></li>
</ul>
</nav>Development and test
Notes for developers
Will require some logic to be able to appropriately apply classes to the pagination items depending on where the currently selected page falls within the list.
Not built to work on dark accent colours.
Button elements can be used instead of anchor elements if required for your particular application.
The current/selected page should not be a link/button if at all possible. If it must remain a link/button ensure aria-current is set correctly so that it is announced correctly to users as they navigate the page using assistive technologies.
Notes for testers
- Ensure that links can be accessed via the mouse as well as via tabbing using the keyboard.
- Use a screen reader to confirm that the links are understandable as to where they will be going when listed out of context of the page.
- Ensure that when hovering over a link the style changes noticeably.
- Ensure that when a link has focus the style changes noticeably.
- There should be a clear visual distinction between the current page, a hover state for selectable pages, non-selected pages, and Previous and Next links. Do not use first and last links or chevrons.
- Show a maximum of nine page links in a desktop or tablet view, or a maximum of five links for a mobile view.
Classes overview
The following table gives you a quick overview of the CSS classes that can be applied.
| Class | Outcome | Required | Applied to | Comments |
|---|---|---|---|---|
.a-pagination |
Base style for pagination | Yes | div |
|
.a-pagination-list |
Base style for a pagination list | Yes | .a-pagination > .a-list-plain |
|
.a-pagination-list__item |
Base style for pagination list items | Yes | .a-pagination-list > li |
|
.a-pagination-list__item--primary |
Modifier to display this list item a all screen sizes | Yes | .a-pagination-list__item |
Maximum of three and must be all together. |
.a-pagination-list__item--secondary |
Modifier to display this list item at large mobile screen sizes or over | Yes | .a-pagination-list__item |
Maximum of two. Can be either side of any primary items |
.a-pagination-list__item--tertiary |
Modifier to display this list item at medium tablet screen sizes or over | Yes | .a-pagination-list__item |
Maximum of four. Can be either side of any secondary items |
.a-pagination-list__item--selected |
Modifier for the currently open page. | Yes | .a-pagination-list__item--primary |
Must not contain a link |
.a-pagination-list__item--previous |
Base style for previous page arrow | Yes | .a-pagination-list__item:first-child |
Is not included if the currently selected page is the first page. |
.a-pagination-list__item--next |
Base style for next page arrow | Yes | .a-pagination-list__item:last-child |
Is not included if the currently selected page is the last page. |
Keyboard operations
- TAB
-
Tabbing to an anchor should make the social link clearly visually different so that the focus point on the page is obvious to the user.
- SPACE or ENTER
-
With focus on an anchor, pressing SPACE or ENTER will open the relevant page.
Component releases
- Added on: v3.0.0 (15/09/17)
- Updated on: v5.0.0 (05/10/20)
Latest update:
- updated: Following WCAG 2.5.5 guidelines pagination links have an increased target size to improve accessibility on touch devices. Due to the increased target size the pattern displayed at different device sizes has been adjusted. At mobile only three page links (rather than five) are displayed and there is now an additional pattern of five page links for large mobile to small tablet. The three layouts have been acheived by inclusion of the new class
a-pagination-list__item--tertairy. - updated: The markup has been adjusted to not only support the adjusted layout, but also to further improve the accessibility of the component, ie. the next and previous links should also call out which page it will move the user to within the aria label, for example "Next page, page 4".
- updated: Aria
role="navigation"removed from<nav class="a-pagination">element as the role is already implied by the element itself.