- Success Criterion 2.5.8
- Conformance level AA
Pagination Numbers Packed Too Tightly Below 24 Pixels
2.5.8 — Target Size (Minimum)
Scenario
Setting
An online clothing store's product listing page
What’s wrong
Pagination numbers / footnote markers packed tightly, each under 24px with no offset spacing.
Example
.pagination a { display: inline-block; width: 20px; height: 20px; margin: 0; font-size: 12px; }Why it matters
A shopper browsing page 7 of results taps page 8 and lands on page 9 instead, since the numbers sit edge to edge.
How to test
Measure pagination number targets and their spacing in DevTools: tightly packed targets each under 24px with no offsetting spacing fail.
How to fix
Give each page number its own 24px square with visible gaps, not just padding that overlaps visually.
.pagination a { width: 24px; height: 24px; margin: 0 4px; }Outcome
A shopper lands on the exact page number they tapped, every time.
Who is affected
People with limited dexterity and touchscreen users with larger fingertips.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Tap Target Smaller Than the Required 24×24 Pixel Minimum
- Small Icon Buttons Packed Too Close Together to Tap
- Tiny Carousel Dots Clustered With No Spacing Between Them
- Calendar Day Cells Too Small to Tap in Compact View
- Toolbar Icons Packed Edge to Edge With No Gap
- Checkbox Hit Area Limited to Its Tiny Visible Glyph