Navigation
Pagination
Step through pages of a long list.
Examples
States
Rendered states (visual reference; the live example above is the accessible one) | Default | Hover | Focus visible | Pressed | Disabled |
|---|
| Page button |
|
|
|
|
|
|---|
Anatomy
Pagination anatomy| # | Part | Description | Presence |
|---|
| 1 | Previous / Next | Buttons with names | Required |
|---|
| 2 | Pages | Numbered buttons | Required |
|---|
| 3 | Ellipsis | Hidden from assistive tech | Optional |
|---|
| 4 | Current page | Filled | Required |
|---|
Interaction
Keyboard| Key | Result |
|---|
| Tab | Each button |
|---|
| Enter Space | Goes to that page |
|---|
Pointer and touch| Trigger | Response |
|---|
| Click | Page loads; focus moves to the top of the results |
|---|
| Hover | Tint |
|---|
Accessibility
role · navigation
2.4.8Location2.5.8Target Size (Minimum)4.1.2Name, Role, Value4.1.3Status Messages
Requirements| Requirement | How Rig meets it |
|---|
| Landmark | <nav aria-label="Pagination"> |
|---|
| Current | aria-current="page" and a name like Page 1, current page |
|---|
| Names | Previous page, Next page, Page 3 |
|---|
| Targets | 36px buttons clear the 24px minimum |
|---|
| Result announcement | Update a live region: Showing results 21 to 40 |
|---|
Read the matching WAI pattern ↗
Usage
Do and don’t| Do | Don’t |
|---|
| ✓Show the total when known | ✕Do not use infinite scroll as the only way to reach content |