Skip to main content
UI Patterns

Pagination

Wrap in nav with aria-label='Pagination'. Mark current page with aria-current='page'. Use meaningful link text ('Page 3') not just numbers. Previous/Next need clear labels, not just arrows.

In plain terms

Page-number links need clear labels and a marker for the current page, not just bare numbers and arrows.

Why this matters

Bare numbers and arrows give screen-reader users no idea where links lead or which page they're on, and tiny arrow targets are hard to tap for people with motor difficulties.

How to detect

Quick check

Confirm pagination sits in a labeled <nav>, that the current page carries aria-current='page', and that each link has meaningful text ('Page 3', 'Next page') rather than just a glyph.