Pagination

Pagination is a set of components that divides large amounts of data into smaller chunks to reduce users’ cognition load.

1. Anatomy

Aria attributes

Value	Purpose
<nav>... </nav>	Identifying Pagination as a navigation section.
aria-current= “page”	Let screen reader pick up the #of current page.
aria-label= “label”	Illustrating the purpose of the pagination.
aria-label= “page [#]”	Voicing the page number.
aria-label= “last page, page [#]”	Adding “last page” or “first page” to indicate the ends of the pagination.

2. Configurations

* Please note that the component does not contain a background or container. Below are for demo purposes. Please place the pagination into a container and customize the margin.

2.1 Item # selector

The item selector can be shown or hidden based on the amount of data a designer deals with.

2.2 Item counter

The item counter can be shown or hidden based on the amount of data a designer deals with.

3. Behavior

Users can click the hyperlink to navigate around the pages.

3.1 Flip the page

Users can flip through the adjacent pages using the previous and next buttons.

3.2 Jump the page

Users can jump to a particular page # by using the page selector.

3.3 Select the # of items shown

Users can select the # of items shown on each page by using the Item # selector. The # of items supports 10, 25, and 50 items per page.

4. States

Breadcrumbs support hover and focus states.

5. Keyboard experience

Keyboard will only focus on the interactive elements like selects or buttons. All the selects label are visually hidden. It should have label= “items per page” for accessibility.

6. Screen reader experience

7. Resilience & responsiveness

Once the component hits the parent container’s bound, it wraps to the next line. Please note, the hyperlink itself does not wrap.

7.1 Mobile view

Once the pagination shrinks below a width of 745 px (smallest tablet size), the Item counter and Item # selector will be automatically hidden.

7.2 Text truncation

In the edge case, when there is an enormous amount of data, the page selector’s text keeps growing, and the item counter’s text flows to the following line.