Pagination

Pagination lets users navigate between discrete pages of content using accessible, keyboard-friendly controls that clearly communicate current position.

Demo

Use the Previous and Next buttons, or individual page number buttons, to move between pages. Notice how the current page is indicated visually and communicated to screen readers. Try navigating with the keyboard to confirm all controls are reachable.

What to Observe

The currently active page button is distinguished both visually and through an accessible label that screen readers announce.
The Previous button is disabled on the first page and the Next button is disabled on the last page, with that state communicated to assistive technologies.
All page controls are reachable and activatable by keyboard alone.
The pagination component is wrapped in a navigation landmark with a descriptive label, so users can find it quickly.
Page number buttons include enough context in their accessible name so users know what each number represents.

Anatomy

[Anatomy image placeholder — will be added when assets are available]

Nav landmark: The wrapping navigation element that groups the pagination controls and provides a label for screen readers.
Previous button: A control that moves the user back one page, disabled when on the first page.
Page number buttons: Individual controls for jumping directly to a specific page, with the current page visually and semantically distinguished.
Ellipsis indicator: A visual placeholder that indicates omitted page numbers in long ranges, presented as non-interactive text.
Next button: A control that advances the user one page forward, disabled when on the last page.

Accessibility Behavior

The current page must be identified in a way that is conveyed to screen readers, not only through visual styling.
Disabled page controls such as Previous on the first page must communicate their disabled state to assistive technologies.
The pagination group must be wrapped in a navigation landmark with a label that distinguishes it from other navigation areas on the page.
Each page number control must have an accessible name that is more descriptive than just the number, such as "Page 3."
All interactive controls must be operable by keyboard without requiring a mouse.
Ellipsis elements used to represent omitted pages must not be focusable or announced as interactive.

Common Mistakes

Marking the current page visually with color or weight alone, without an accessible label that screen readers can announce.
Using div or span elements for page buttons instead of actual button elements, making them inaccessible to keyboard users.
Forgetting to label the pagination nav landmark, leaving it indistinguishable from the site's main navigation.
Not communicating the disabled state of Previous or Next buttons, so assistive technologies still announce them as interactive.
Using only a bare number as the accessible name for each page button, depriving screen reader users of context.

Why This Matters

Pagination is a core navigation pattern for lists, search results, and data tables. When the current page or disabled state is conveyed only visually, screen reader users cannot determine where they are in a set of results. When controls are not keyboard-accessible, users who rely on keyboards or switch devices are unable to move through the content at all. Properly structured pagination allows everyone to browse large data sets with confidence and clarity.

Accessibility Validation

This component is validated against internal accessibility criteria aligned with WCAG standards, using our internally developed system, Resonance Specs.

To learn more, please contact us.