Loading...
Every pattern from classic page numbers to infinite scroll
The most common pagination pattern. The key ingredients: wrap in a <nav> landmark, use proper list structure, and indicate the current page with aria-current.
Wrapping pagination in <nav aria-label="Pagination"> creates a landmark that screen reader users can jump to directly.
This attribute tells screen readers which page is currently active. Without it, users only know visually which page is selected.
Use aria-label="Go to page 3" on buttons. Generic "3" labels don't explain what the button does.
❌ VoiceOver: "1, 2, 3, 10" — no context that these are page numbers!
<!-- ❌ INACCESSIBLE -->
<div class="pagination">
<div onclick="prevPage()">‹</div>
<div onclick="goToPage(1)" class="active">1</div>
<div onclick="goToPage(2)">2</div>
<div onclick="goToPage(3)">3</div>
<div onclick="nextPage()">›</div>
</div>
<!-- Problems:
- No keyboard access (divs aren't focusable)
- No landmark for navigation
- No indication of current page
- Screen reader can't understand structure --><!-- ✅ ACCESSIBLE -->
<nav aria-label="Pagination">
<ul>
<li>
<button aria-label="Previous page">‹</button>
</li>
<li>
<button aria-current="page" aria-label="Page 1, current">
1
</button>
</li>
<li>
<button aria-label="Go to page 2">2</button>
</li>
<li>
<button aria-label="Next page">›</button>
</li>
</ul>
</nav>aria-hidden="true" to hide it from screen readers—it adds no useful information.