Pagination

Overview

Pagination lets users move through pages of content. When built with bare number links, screen readers announce only “1, link, 2, link, 3, link” with no context about what the numbers mean or which page is active. The correct pattern wraps pagination in a <nav> landmark, uses a list for structure, gives each link a descriptive aria-label, marks the active page with aria-current="page", and disables unavailable controls with aria-disabled.

WCAG Criteria:

• 1.3.1 Info and Relationships  — structure and relationships conveyed through presentation must also be available programmatically
• 2.4.4 Link Purpose (In Context)  — the purpose of each link can be determined from the link text or its context

Key requirements:

• Wrap pagination in <nav aria-label="Pagination"> to create a navigation landmark
• Use <ul> and <li> to provide list structure
• Add aria-label="Page X" to each page link so numbers have meaning
• Mark the current page with aria-current="page"
• Provide Previous/Next links with descriptive labels
• Use aria-disabled="true" on unavailable controls (e.g., Previous on page 1)

Page Navigation

<!-- No landmark, no labels, no current page indicator -->
<div>
  <a href="/results?page=1">1</a>
  <a href="/results?page=2">2</a>
  <a href="/results?page=3">3</a>
  <a href="/results?page=4">4</a>
  <a href="/results?page=5">5</a>
</div>

<nav aria-label="Pagination">
  <ul style="list-style:none;display:flex;gap:4px;margin:0;padding:0;">
    <li>
      <!-- Disabled when on first page -->
      <a href="/results?page=0" aria-disabled="true">Previous</a>
    </li>
    <li>
      <a href="/results?page=1" aria-label="Page 1">1</a>
    </li>
    <li>
      <a href="/results?page=2" aria-label="Page 2">2</a>
    </li>
    <li>
      <a href="/results?page=3" aria-label="Page 3" aria-current="page">3</a>
    </li>
    <li>
      <a href="/results?page=4" aria-label="Page 4">4</a>
    </li>
    <li>
      <a href="/results?page=5" aria-label="Page 5">5</a>
    </li>
    <li>
      <a href="/results?page=4" aria-label="Next page">Next</a>
    </li>
  </ul>
</nav>

What’s wrong with plain number links?

• No <nav> landmark — screen reader users cannot find pagination via landmarks
• No list structure — the group of links has no semantic relationship
• “3” alone is meaningless — a screen reader just says “3, link” with no page context
• The current page is only styled differently — no programmatic indicator for assistive technology
• No Previous/Next controls for sequential navigation

Predicted semantic summary (exact output varies):

Resources

• WAI — Menus tutorial: identify the current item 
• MDN — <nav> element
• MDN — aria-current
• WCAG 1.3.1 — Info and Relationships 
• WCAG 2.4.4 — Link Purpose (In Context)