Accessible Pagination

Comprehensive guide to creating accessible pagination with proper navigation and keyboard support.

2.1.12.4.3

Semantic Pagination

Use <nav aria-label="Pagination"> to identify the pagination region. Use an ordered list for page numbers. The current page should have aria-current="page" and not be a link. Previous/Next buttons should have clear labels. Provide screen reader text indicating current page and total pages.

Interactive Example

Test the accessible semantic pagination implementation

Testing Guide

Keyboard Navigation

•Tab through pagination links
•Current page is not focusable
•Previous/Next are accessible

Screen Reader

•Pagination region is announced
•Current page is indicated
•Page numbers are clear

Code Implementation

Accessible semantic pagination implementation

Best Practices

Accessibility Considerations

Key Points:

•Use nav element with aria-label
•Indicate current page with aria-current
•Provide clear Previous/Next labels
•Announce current page and total pages
•Ensure keyboard navigation works
•Use ordered list for page numbers

Warnings:

⚠Don't make current page a link
⚠Ensure pagination is keyboard accessible

Additional Resources

Related WCAG Criteria

Examples/Pagination