General
- Ensure sufficient colour contrast for all controls
- Do not rely on colour alone to indicate the current page — use multiple visual indicators
- Make all page controls keyboard accessible
- Provide clear labels for navigation controls
- Announce page changes to screen readers
Web
Semantic markup
- Use <nav> with aria-label="Pagination" to identify the pagination controls
- Use a list structure (<ul> and <li>) for page numbers
- Use <button> or <a> elements for interactive page controls
- Use aria-current="page" to indicate the current page
Key accessibility attributes:
- Previous/Next buttons: Use descriptive aria-label (e.g., "Go to previous page", "Go to next page")
- Page number buttons: Use aria-label to provide context (e.g., "Go to page 3")
- Current page: Use aria-current="page" and update the label (e.g., "Page 3, current page")
- Icon-only buttons: Hide icons from screen readers with aria-hidden="true" and provide text labels
- Ellipsis separator: Use aria-hidden="true" since it is decorative and non-interactive
- Disabled buttons: Use disabled attribute or aria-disabled="true"
Live announcements
- Use aria-live="polite" region to announce page changes
- Announce the current page and total pages (e.g., "Page 3 of 10")
- Update the announcement when users navigate to a new page
Keyboard navigation
- Users should be able to Tab through pagination controls
- Enter or Space should activate page buttons
- Consider adding keyboard shortcuts (e.g., Left/Right arrows) for Previous/Next if appropriate
- Focus indicators must be clearly visible with a minimum 3:1 contrast
Items per page control
- Use a properly labelled <select> element
- Associate with a <label> using for attribute
- Provide clear options (e.g., "10 per page", "25 per page")
- Announce the change when users update the selection
React Native
- Provide appropriate accessibility labels for pagination controls
- Use accessibilityRole="button" for page number and navigation buttons
- Use accessibilityLabel with descriptive text (e.g., "Go to page 3")
- Mark the current page with appropriate state information
- Ensure all controls are keyboard and screen reader accessible
- Use accessibilityState={{ disabled: true }} for disabled buttons