Pagination A11Y

title: "Accessible Pagination — Paging Controls with Keyboard and Screen Reader Support" description: "Learn how to build accessible pagination with proper ARIA roles, current page indication, keyboard navigation, and screen reader announcements." weight: 7 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, navigation]

Accessible pagination provides navigation through pages of results using proper links, aria-current for the active page, and screen reader-friendly labels.

## What You'll Learn

How to build pagination that works with keyboard navigation, announces the current page, and provides context about the total number of pages.

## Why It Matters

Pagination appears on search results, product listings, and article archives. Inaccessible pagination blocks users from accessing results beyond the first page.

## Real-World Use

A screen reader user searches for products. The results span 25 pages. The pagination component announces "Page 3 of 25" and the user navigates to page 5 using the numbered links.

## Pagination Implementation

```html
<nav aria-label="Search results pagination">
  <ul>
    <li><a href="?page=2" aria-label="Previous page">&laquo; Prev</a></li>
    <li><a href="?page=1" aria-label="Page 1">1</a></li>
    <li><a href="?page=2" aria-label="Page 2">2</a></li>
    <li aria-current="page"><span aria-label="Page 3, current page">3</span></li>
    <li><a href="?page=4" aria-label="Page 4">4</a></li>
    <li><a href="?page=5" aria-label="Page 5">5</a></li>
    <li><a href="?page=4" aria-label="Next page">Next &raquo;</a></li>
  </ul>
</nav>

Current Page as Text

<nav aria-label="Products pagination">
  <ul>
    <li><a href="?p=2" aria-label="Go to previous page">Previous</a></li>
    <li><a href="?p=1" aria-label="Page 1">1</a></li>
    <li><span aria-current="page" aria-label="Page 2, current page">2</span></li>
    <li><a href="?p=3" aria-label="Page 3">3</a></li>
    <li><a href="?p=3" aria-label="Go to next page">Next</a></li>
  </ul>
</nav>

Page Count Information

<div role="status" aria-live="polite">
  Showing page 3 of 25
</div>

Common Mistakes

1. Current page as a link

The current page should not be a link. Use a span or strong element with aria-current="page".

2. No aria-label on Previous/Next

"Prev" and "Next" without aria-label are ambiguous. Use "Go to previous page" and "Go to next page".

3. Page numbers without context

Numbered links need aria-label="Page 3" so screen reader users know the purpose.

4. Not wrapping in nav

Pagination is navigation and should use the nav element with an appropriate aria-label.

5. No total page count context

Provide a status message showing "Page X of Y" for screen reader users.

Practice Questions

1. Should the current page be a link or text? Text (span or strong). The current page is not a navigable destination.

2. What aria-label should Previous button have? "Go to previous page" provides clear context that "Prev" alone does not.

3. What element should pagination be wrapped in? nav with aria-label describing the pagination purpose, like "Search results pagination."

Challenge: Build pagination for a blog archive with 30 pages. Include Previous, ellipsis, numbered pages, Next, and current page indication. Test with screen reader.

FAQ

Mini Project

Create a pagination component for a product listing page with 50+ products. Include page numbers, Previous/Next, current page indication, and a page count live region.

What's Next

Learn the Tabs Pattern and how to implement accessible tab interfaces with proper ARIA roles and keyboard navigation.