Pagination
The pagination component provides navigation controls for multi-page content, allowing users to move between pages of search results, article listings, or other paginated data. Use pagination to break large content sets into manageable chunks while maintaining clear navigation paths. The component includes first/last page links, previous/next navigation, and numbered page indicators with proper accessibility support.
Do
- Include first and last page links to help users quickly jump to the beginning or end of large result sets.
- Provide previous and next navigation for sequential browsing without requiring users to select specific page numbers.
- Show current page clearly with distinct visual styling that doesn’t rely solely on color differences.
- Use descriptive link text with proper titles and screen reader text for all navigation elements.
- Implement proper ARIA labels to identify the pagination navigation landmark for assistive technologies.
- Test keyboard navigation to ensure all pagination controls are accessible without a mouse.
- Consider mobile experience by using responsive design that works well on touch devices.
- Provide page context by showing the current page number and total pages when helpful.
Don’t
- Don’t show too many page numbers — limit visible page links to prevent overwhelming users with choices.
- Don’t use pagination for small content sets — consider showing all content when there are only a few items.
- Don’t forget to disable navigation for unavailable actions (first/previous on page 1, next/last on final page).
- Don’t rely solely on icons for navigation — include text labels for clarity and accessibility.
- Don’t make pagination links too small — ensure adequate touch targets for mobile users.
- Don’t ignore loading states — provide feedback when users navigate to new pages.
- Don’t break the back button — ensure pagination works properly with browser navigation.
- Don’t use pagination without clear content organization — users should understand what they’re navigating through.
Standard Pagination
Complete pagination navigation with all standard controls. Demonstrates first/last page links, previous/next navigation, numbered page indicators, and current page highlighting. Use this pattern for search results, content listings, and any multi-page data presentation.
Accessibility Best Practices
Screen Reader Support
- Navigation landmark: Uses
<nav>element witharia-label="Pagination"to identify the pagination controls. - Descriptive link text: Each pagination link includes clear titles and hidden text for screen reader context.
- Current page indication: Active page uses
<span>instead of<a>to indicate it’s not clickable. - Relationship indicators: Previous/next links include
rel="prev"andrel="next"attributes for context.
Keyboard Navigation
- Full keyboard access: All pagination links are accessible via Tab key navigation and activated with Enter.
- Logical tab order: Pagination controls follow natural left-to-right reading order.
- Focus indicators: Clear visual focus states help keyboard users identify their current position.
- Skip functionality: Users can efficiently navigate through pagination without getting trapped.
Visual Accessibility
- High contrast ratios: All pagination text and interactive elements meet WCAG AA contrast requirements.
- Clear current page styling: Active page state is indicated through multiple visual cues, not color alone.
- Adequate sizing: Pagination links meet minimum touch target sizes (44px) for mobile accessibility.
- Consistent styling: All pagination states (default, hover, active, focus) are visually distinct.
Content Guidelines
- Clear navigation labels: Use standard text like “First,” “Previous,” “Next,” “Last” for predictable user experience.
- Descriptive titles: Include helpful title attributes that explain where each link will take users.
- Consistent terminology: Use the same pagination language across all instances on your site.
- Page number clarity: Make the current page number clearly visible and distinguishable from other pages.
Implementation Considerations
- Performance optimization: Consider lazy loading or progressive enhancement for large result sets.
- URL structure: Ensure pagination creates bookmarkable URLs that users can share or return to.
- State management: Maintain user context (filters, search terms) when navigating between pages.
- Responsive behavior: Test pagination layout and functionality across different screen sizes.
ARIA Attributes in Use
aria-label="Pagination"— Identifies the navigation landmark for screen readers.aria-hidden="true"— Hides decorative symbols (« › ») from screen readers while keeping them visible.rel="prev"— Indicates previous page relationship for browser and assistive technology context.rel="next"— Indicates next page relationship for browser and assistive technology context.