Pagination nav - Web accessibility testing checklist

How to test a pagination nav

Gherkin Condensed

Given that I am on a screen with a pagination nav

1 Keyboard only

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 screenreader 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

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 WCAG principles:

1 Perceivable

Is easy to identify as interactive

2 Operable

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

3 Understandable

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

4 Robust

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/">Previous</a></li>
    <li><a href="/1/" aria-label="Page 1">1</a></li>
    <li>
      <a href="/2/"
         aria-label="Page 2"
         aria-current="page">
        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.

Related pagination nav entries

Web demo: Pagination nav

Web Pagination nav