How to build an accessible Pagination in React

Wrapped in <nav> with an accessible label; page controls are real buttons with current-page state exposed, and all visible/assistive strings are overridable via labels for i18n

When to use a Pagination

• Navigating between pages of a paged dataset
• Letting the user change how many items appear per page (onPageSizeChange)
• Pairing with a table or list that loads data in chunks

When not to use it

• Navigating a content hierarchy — use Breadcrumb
• Infinite scroll experiences where pages are not exposed

Keyboard interactions

Role navigation, verified at WCAG 2.2-AA.

• Tab
• Enter
• Space
• ArrowUp
• ArrowDown

Common mistakes

Avoid: Using Pagination to navigate between unrelated app sections

Prefer: <Tabs> or nav links for section switching

Pagination semantics imply sequential pages of one dataset, not arbitrary navigation

Example

<Pagination page={1} pageSize={25} totalItems={103} onPageChange={setPage} />

See the full Pagination reference →