Accessible Components: The Pagination

A pagination component is a way to divide related content into different screens or pages. It consists of a series of links of numbered pages. Many iterations of this component are unfortunately not accessible to users with disabilities. Let’s look at the techniques to make any pagination the best experience for all users.

Appropriate usage

The pagination component is practical when a list of items is too long to display sequentially on a page. It will reduce the page loading time and make navigating through its multiple pages or screens easier.

Expected interactions

This component has many considerations to ensure that it respects accessibility best practices.

General considerations

• If used within a single-page application, ensure that clickable elements are coded as buttons.? Otherwise, if the clickable elements generate new pages, ensure they are coded as links. There exists a fundamental difference between buttons and links. Semantically, buttons should be used for submitting forms or for interactive components that stay on the same page. In comparison, links should be used as anchors or when the destination is another page.
• The previous button/link must not be focusable when the first page in the pagination component is selected.
• The next button/link must not be focusable when the last page in the pagination component is selected.
• The target area of each button/link must be large enough to point to or click on with ease. Any target area above 24 pixels by 24 pixels is good. This will help users target the controls accurately.
• Ensure the colour contrast ratio of the icons and the page numbers are sufficient to respect WCAG requirements, which are 3:1 for icons and 4,5:1 for text. The contrast will make it easier for users to see the items.

Keyboard interactions

• The focus must move to each active control within the pagination component and have a visible indicator.
• It’s important to note that buttons can be triggered via the keyboard with the Enter or the space bar, while links are triggered only with the Enter keystroke. These keystroke behaviours are known and expected by keyboard and screen reader users and must be kept.??

Screen Reader interactions

For screen reader users to understand the pagination functionalities we use ARIA regions, properties, or states as follows:

• Ensure the pagination region is appropriately identified. Group the entire component with a nav element and with an aria-label attribute (e.g. <nav aria-label=”Pagination”>).
• Use a list structure with appropriate ARIA properties. Add the attributes aria-setsize to the list and aria-posinset to the list items.
• Ensure the page numbers have labeling identifying what the numbers refer to (i.e., <a href=”...” aria-label=”Page 1”>1</a>).
• Add aria-current="page" or "true" to the current page number to explicitly indicate that it is active.
• Ensure the previous, and next buttons/links have appropriate labels with an alt text or an aria-label attribute. The previous and next buttons/links can be included within the numbers list, but it is optional.
• If an ellipsis is used between numbered pages, it must have an appropriate label.
• If the content is changed dynamically without generating a new page, this must be announced to the screen reader programmatically.

Examples of the pagination component

• Accessible Pagination with buttons
• Accessible Pagination with links

Pagination alternatives

There are other ways of dividing a set of items within a page but beware of their accessibility requirements and limitations.

Load more

At the bottom of a list, you may sometimes find a “Load More” control that adds more items following the original displayed list. For this technique to be accessible, the load more control must be coded as a button, and a logical focus order must be implemented. This focus management is done by moving the focus to the first new item displayed after the load more button is clicked.

Infinite scroll

The infinite scroll is a component that loads content when scrolling down the page. It is found primarily on mobile interfaces. This technique can be very problematic to screen reader users and keyboard-alone users since the behaviour of the infinite scroll is based on manual scrolling on a touch screen. In other words, the new content won’t be perceived when the focus moves away from the last visible item. The loading of the new items will need to happen before the user reaches the last item shown to avoid losing the logical focus order.

Making the pagination component more user-friendly

Other best practices to consider to make the pagination component usable for all:

• Differentiate the currently selected state from the focused or unselected states visually.
• Add more flexibility and information by including a dropdown of the number of items per page, the total number of items in the entire list, or even an input field to go to a specific page.
• Consider adding pagination at the top and bottom of the list.
• Make it easy for users to get to the first and last pages of the pagination with dedicated buttons/links.

Hopefully these tips help you make the best decisions when using a pagination navigation.

Related content

• Best practices for designing Pagination in web | by UXness | UXness | Medium
• Pagination design pattern by UI Patterns