Accessible Pagination

Accessible pagination enables users to navigate between pages of content through properly labeled controls, keyboard support, and clear indication of current position. Screen reader users need the same navigation capabilities as sighted users.

What Is Accessible Pagination

Pagination divides content into discrete pages, providing navigation controls to move between them. Common patterns include numbered page links, previous/next buttons, and first/last shortcuts.

Accessibility requirements for pagination include: clear labeling of the navigation region, indication of current page, accessible previous/next controls, and proper keyboard navigation.

WCAG Success Criterion 2.4.8 (Location) at Level AAA recommends indicating user location within a set of pages. Pagination inherently addresses this by showing current page position.

How Accessible Pagination Works

The navigation landmark identifies pagination for screen readers:

The aria-label “Pagination” (or more specific like “Search results pagination”) helps users understand the navigation’s purpose.

Current page indication uses aria-current=“page” on the current page link:

Screen readers announce “Page 2, current page” providing both the destination and current position context.

Previous/next buttons need clear labels:

Icon-only buttons require aria-label since icons do not provide accessible text.

Disabled states for previous (on first page) or next (on last page) should use proper disabled indication. aria-disabled=“true” communicates the state while keeping the element in the accessibility tree for discovery.

Page range information helps users understand scope: “Page 2 of 10” or “Showing items 11-20 of 100.” This information should be announced or easily discoverable.

Key Considerations

• Wrap pagination in nav element with descriptive aria-label
• Use aria-current=“page” on the current page link
• Label previous/next controls clearly
• Indicate total page count or item range
• Ensure keyboard accessibility for all controls
• Handle disabled states accessibly
• Announce page changes through focus or live regions

Common Questions

Should page changes announce automatically?

When clicking pagination loads new content on the same page, users benefit from announcements or focus management. Options include:

• Moving focus to the content area
• Announcing “Page 2 loaded” through a live region
• Updating the page title to reflect current page

Full page loads naturally announce through page title and content structure.

How should pagination work with infinite scroll alternatives?

Some interfaces offer both pagination and infinite scroll. The choice affects accessibility significantly. Pagination provides clear structure; infinite scroll can lose position context.

If offering both, ensure pagination remains accessible and provides a viable alternative to infinite scroll.

What about “load more” patterns?

“Load more” buttons that append content rather than paginating are different from traditional pagination. The button needs a clear label indicating action. After loading, focus management or announcements help users understand new content is available.

Combining “load more” with page indicators (“Showing 30 of 100 items”) helps users understand their position.

Summary

Accessible pagination uses proper navigation landmarks, aria-current for current page indication, labeled controls for previous/next navigation, and communicates position within the content set. Keyboard accessibility and appropriate announcements ensure all users can navigate paginated content effectively.