Pagination

Library integration

Use the codes below to add this component to your project. Download the latest version of the library to easily implement our full range of components.

Angular

<cpc-ds-pagination 
[totalRecords]="1000" 
[selectedIndex]="0" 
[pageSize]="12" 
[pageSizeOptions]="[12, 24, 48, 96, 112, 212, 412, 512, 612, 712]"></cpc-ds-pagination>

HTML

<script src="[JS-PLACE-HOLDER]"></script> 
<script>
    document.addEventListener('DOMContentLoaded', initPaging('custom-dropdown-pagination', 'custom-dropdown-label-pagination'), false);
</script>

<div data-title="Pagination">
                <h2 class="section-heading">Pagination</h2>
                <div id="pageinationText" class="pageinationText" aria-live="polite"></div>
                <div class="pagination-block">
                    <div id="pagination" class="paginatin-item" role="navigation" aria-label="Pagination"></div>
                    <div class="resultsPerPage paginatin-item">
                        <label id="custom-dropdown-label-pagination">Results per page </label>
                        <select id="custom-dropdown-pagination" aria-labelledby="custom-dropdown-label-pagination" class="ds-cpc-control-select__tpl small-width">
                            <option selected="true">12</option>
                            <option>24</option>
                            <option>48</option>
                            <option>96</option>
                        </select>
                    </div>
                </div>
                <div class="spacer"></div>
    </div>

When the number of pages is greater than 5, the following guidelines apply.

Legend
a = number of displayed page minus 1
b = number of displayed page
c = number of displayed page plus 1
d = last page number minus 2
e = last page number minus 1
f = last page number

• If a user is on page 1 or 2, the page numbers should appear as 1, 2, 3, …, f
• If a user navigates past the first 3 and before the last 3 pages, the page numbers should appear as 1, …, a, b, c, …, f
• If a user is on the last few pages, the page numbers should appear as 1, …, d, e, f
• When a user is on a page, it should appear in a selected state.
• Affordance is given to the interaction by providing a hover state to the interactive elements.

It might be clear to sighted users how to navigate to previous or next pages in search results or archives. However, for those with low or impaired vision, we need to indicate for screen readers where the user is and where they’re going. The label should consider the type of content the user is jumping to.

Guidelines

Accessible features

An accessible pagination component should include:

• Pagination announcer text.
• A currently selected pagination button that's distinct visually as well as programmatically from other pagination buttons.
• An input field, rather than pagination buttons, in mobile view. The input field should have a text string next to it indicating the number of available pages.

Focus halo

Pagination links/buttons must have a prominent focus outline when they're focused or hovered.

Keyboard interaction

• Tab: Focus moves to the next interactive element
• Shift + Tab: Focus moves to the previous interactive element

All interactive elements of the pagination component are in the page tab order.

The first and last interactive elements in a pagination component depend on the position of the dropdown menu and currently selected page.

The first interactive element will always be one of the following:

• The 'previous page' button
• The button for the first page
• The dropdown menu

The last interactive element will always be one of the following:

• The dropdown menu
• The button for the last page
• The 'next page' button

When a pagination button has focus, Space or Enter activates the button.

Focus remains on pagination buttons after they’re activated.

Pagination controls

Pagination controls can have the role of a button or a link depending on the action they perform. The visual appearance and functionality of the controls remain the same regardless of the role they've assumed.

Link vs button

The role should be set to “link” when pagination controls load a new URL (for example, a new set of search results).

The role should be set to “button” when the pagination controls don't direct to a new URL, and load the previous or next values of something on the same page (for example, the navigation controls for paging through a table).

Pagination announcer

The pagination announcer is provided to ensure that users are told when the page view changes. When the user selects a pagination button, the announcer's text will update to provide information relevant to the new page view.

Examples

1. As a user navigates through search results, a page change is announced as “showing 21 to 40 results of Stamps.”
2. As a user navigates a pagination component in a document, it’s announced as “Page 3 of 10 Table of Contents” when page 3 is selected and shown. This updated text is announced immediately to the screen reader.

ARIA properties

Pagination can have the following ARIA properties:

• Pagination buttons can have role of link or role of button, depending on the application.
• Pagination announcer text should have aria-live set to "polite" on the containing element.
• The currently selected pagination button should have aria-current=”page” set to it.
• The pagination block (pagination buttons and number of results dropdown menu) should be wrapped in a navigation region.
• The navigation region should have an off-screen label set as “Pagination” using aria-label.
• Pagination buttons should be replaced with an input field in mobile view. The field should have a text string next to it indicating the number of available pages. This string should be programmatically associated with the field using the aria-describedby attribute.

Testing

When testing pagination, the tester must ensure:

• The pagination is fully keyboard operable.
• Indications for focused and hovered states are clear and prominent.
• Pagination buttons take a focus halo on hover or focus and the dropdown and its menu options are highlighted on focus or hover.
• The pagination announcer text changes and this text is announced to the screen reader when going to a new page.
• The pagination announcer text changes by changing the results per page in the dropdown menu. This updated text is announced to the screen reader.
• The pagination button’s role is relevant to the function it's performing.
• The pagination block (pagination buttons and the dropdown menu) is wrapped in a navigation region.
• The screen reader announces all the roles (the region, the link or the button, and the combobox) properly.
• The navigation region has the off-screen label “Pagination” and the screen reader announces the region label with the navigation region.
• The current page button has a design that indicates it's the current page and the screen reader announces it as the current page.
• On mobile devices, the screen reader announces the pagination input field’s current value as well as the text indicating the total number of available pages.
• The input field, previous page/next page control, and the dropdown menu, all have clear and prominent visual changes when tapped while using a mobile device.

Related content

• Buttons
• Links
• Input fields
• Dropdown menus