Make pagination accessible
SkillWeb & browsingpagination-accessibility is a skill for reviewing paginated web content so screen reader users can tell which page they are on and move through it. It guides checks of templates, rendered HTML, and shared components, and insists on validating the final browser-facing markup rather than the source framework abstraction.
Available today. Use it from your connected AI after setup.
No other account needed.
Have the templates, rendered HTML, or shared components that output pagination ready for review.
Then ask your AI: use the Make pagination accessible skill
What your AI can do with it
- Review templates, server-rendered HTML, and shared components for pagination markup
- Check that pagination uses a nav element with aria-label='Pagination'
- Verify the current page is marked with aria-current='page'
- Flag missing or unclear labels on previous/next buttons
- Confirm pagination controls are keyboard navigable and focusable
- Point to references/rule.md for code examples and framework-specific guidance
Getting started
- Have the templates, rendered HTML, or shared components that output pagination ready for review.
- Add the pagination-accessibility skill to the agent's available skills.
- Ask the agent to review the pagination markup against the rule.
- Apply the fixes it flags, such as nav with aria-label, aria-current='page', and focusable controls.
- Consult references/rule.md for implementation details and framework-specific guidance.
What this skill tells your AI
The instructions your AI receives, as published by thedaviddias/front-end-checklist in skills/pagination-accessibility/SKILL.md and read by ahel’s review.
Without proper markup, screen reader users cannot understand which page they're on or navigate efficiently through paginated content.
Quick Reference
- Use nav element with aria-label='Pagination'
- Mark current page with aria-current='page'
- Provide clear labels for previous/next buttons
- Announce page changes to screen readers
Check
Verify pagination uses nav element with aria-label, indicates current page with aria-current, and is keyboard navigable.
Fix
Implement pagination with nav role='navigation', aria-label, aria-current='page' for active page, and focusable controls.
Explain
Explain how accessible pagination helps screen reader users understand their position and navigate through paged content.
Code Review
Review templates, server-rendered HTML, and shared components that output markup related to Make pagination accessible. Flag exact elements, attributes, and routes where the rendered HTML violates the rule.
For full implementation details, code examples, and framework-specific guidance,
see references/rule.md.
Rule page: https://frontendchecklist.io/en/rules/html/pagination-accessibility
Signals
- GitHub stars
- 74k
- Forks
- 7k
- Last commit
- Aug 2026
Questions
- Why validate rendered HTML instead of the framework abstraction?
- Because screen readers interact with the final browser-facing markup. A component can look correct in source while the rendered output lacks the nav element, aria-label, or aria-current that users depend on.
- What does accessible pagination require?
- A nav element with aria-label='Pagination', aria-current='page' on the active page, clear labels for previous/next buttons, focusable controls, and announcing page changes to screen readers.
Advanced
- Item type
- skill
- Key
pagination-accessibility- Source
- github.com/thedaviddias/front-end-checklist