Pagination nav

How to test a pagination nav

Gherkin Condensed WCAG

Given that I am on a page with a pagination nav

1 Keyboard for mobile & desktop

WHEN I use the arrow keys to browse to a pagination navigation I SEE the nav comes into view
Then when I use the tab key to move focus to a link in the nav and use the enter key I SEE my browser goes to the intended location

2 Desktop screenreader

WHEN I use a desktop screenreader (NVDA, JAWS, VoiceOver) AND I use the arrow keys to browse to a pagination navigation
- I HEAR The pagination nav has a logical name ("pagination")
- I HEAR The nav landmark is discoverable with screenreader shortcuts
Then when I use the tab key to move focus to a link in the nav and use the enter key I HEAR my browser goes to the intended location

3 Mobile screenreader

WHEN I use a mobile screenreader (Talkback, VoiceOver) AND I swipe to elements in the nav
- I HEAR The pagination nav has a logical name ("pagination")
- I HEAR The nav landmark is discoverable with screenreader shortcuts
Then when I doubletap with the link in focus I HEAR my browser goes to the intended location

1 Keyboard & screen reader actions

When I use	I see/hear
Tab	Focus moves to links and buttons within the nav

2 Mobile screenreader gestures

When I use	I hear
Swipe	Focus moves within the nav
Doubletap	Activates links

3 Screenreader output for all devices

Reads	I hear
Name	The pagination nav has a logical name ("pagination")
Role	The nav landmark is discoverable with screenreader shortcuts

A pagination nav must meet these WCAG principles.

1Perceivable

Is easy to identify as interactive

2Operable

Is keyboard operable
The click/tap target area is no smaller than 44x44px
The focus state has a 3:1 minimum contrast ratio against default
The focus indication has a 3:1 minimum contrast ratio against adjacent elements
The focus indication has a minimum area equal to the width of the element and 2px in height
Color is not used as the only means of conveying current page

3Understandable

Its purpose is clear in the context of the whole page
It has the correct semantic meaning (link, navigation)

4Robust

Conveys the correct semantic role
Expresses its state
Meets criteria across platforms, devices and viewports

Code examples

Use semantic HTML

This semantic HTML contains all accessibility features by default.

<nav class="pagination" aria-label="Pagination">
  <ul>
    <li>
      <a href="/1/"
         aria-label="Page 1"
         aria-current="page">
        1
      </a>
    </li>
    <li><a href="/2/" aria-label="Page 2">2</a></li>
    <li><a href="/3/" aria-label="Page 3">3</a></li>
    <li><a href="/4/" aria-label="Page 4">4</a></li>
    <li><a href="/5/" aria-label="Page 5">5</a></li>
    <li><a href="/2/">Next</a></li>
  </ul>
</nav>

Developer notes

Name

Use aria-label="Pagination" when there is not a visible nav title.
- aria-describedby="title-id" can be used when the nav title is a visible heading.
Use aria-label="Page X" for each entry link.

Role

Identifies itself as navigation
Use role="navigation" when it’s not possible to use <nav>.
DO NOT add menu or option roles with arrow key event listeners unless you’re building an actual application like Gmail.

State

Use aria-current="page" on the current page item.