Pagination

Pagination divides content into separate pages or sections to improve readability and navigation.

Keyboard interactions

The tab order goes from left to right through the controls in the pagination component. On focus, the dropdowns are opened with Space or with up or down arrows, which also cycle through the values.

Both Space and Enter select a value and close the dropdown. The dropdown can also be closed by pressing Esc.

The previous and next page arrow buttons are activated by Space or Enter keys. When the pagination is at either end of its range, one of the page navigation buttons becomes invalid. When that happens, the button is no longer navigable or operable, like any other disabled control.

Avoid large horizontal gaps between elements. Users with limited vision or mobility may stop scanning and miss an element if there’s too much horizontal space between it and the previous element in the reading order.

Use generous touch targets. Use touch targets that are big enough to select with any finger and have enough separation to avoid mistakes.

 

Use a wrapping <nav> element to identify pagination as a navigation section to screen readers and other assistive technologies.

Use a unique, descriptive ARIA label for the <nav> element. For example, if the pagination component is used to navigate through a set of search results, an appropriate label could be aria-label="search results page". If you use more than one pagination component on a page, each will need a unique ARIA label.

Use an unordered list for the navigation items. This allows screen readers to voice the number of elements in the component.

Voice the current page. Use aria-current="page" on the current page’s link item to properly voice the current page for screen readers.

Voice the word “page” before the page numbers in links. Use aria-label="page [#]" on each page link to be explicit that the numbers are links to page numbers.

Voice “last page” on the last page’s link in a bounded set. Use aria-label="last page, page [#]" to voice that the last element in the navigation is the last page in the paginated section. Don’t include this on the last navigation element in an unbounded set, since there is no last page in an unbounded set.

Use a link for the current page for robustness. While it may sound counterintuitive to link to the current page in your Pagination component, it makes sense to include this as a link so screen readers voice the current page whether the user navigates by element or by tabbing.