Accessibility

Accessible pagination requirements

Keep these considerations in mind if you are modifying the design system or creating a custom component.

WCAG guidelines

1.3.1 Info and Relationships

Identify pagination as a navigation section

Enclose Pagination in a <nav> element to signify it as a navigation section to screen readers and other assistive technologies.

Implement an unordered list for the navigation items, allowing screen readers to announce the number of elements in the Pagination component.

1.4.3 Contrast (Minimum)

Ensure that the text and background colours of pagination controls have a contrast ratio of at least 4.5:1 to accommodate users with low vision or colour deficiencies.

1.4.8 Visual Presentation

Avoid large horizontal gaps between elements

Prevent large horizontal gaps between elements to accommodate users with limited vision or mobility. Excessive horizontal space between elements might cause users to stop scanning and miss an element in the reading order.

2.1.1 Keyboard

Keyboard accessibility

Ensure that all pagination functionality is operable through a keyboard interface without requiring specific timings for individual keystrokes.

2.4.7 Focus Visible

Focus visibility

Make sure that any keyboard-operable user interface, such as pagination controls, has a visible focus indicator. This assists users who rely on keyboard navigation.

2.4.6 Headings and Labels

Clear labels for navigation elements

Provide clear and descriptive labels for the pagination controls, such as "Next" and "Previous," to ensure that users understand the purpose of the controls.

4.1.2 Name, Role, Value

Provide descriptive ARIA labels for navigation

Assign to aria-label="Pagination" to the Pagination component's <nav> landmark.

Apply aria-current="page" to the current page's link item for proper screen reader voicing.

Even though it may seem counterintuitive, include a link to the current page in your Pagination component. This ensures that screen readers voice the current page, whether the user navigates by element or by tabbing.