Course progress: 0 / 20 lessons

PRACTICE 6 OF 9 · Controls and navigation

Pagination

Move through page controls and listen for current page, unavailable actions, and result range.

  • Level: Beginner
  • Time: 5-10 minutes
Objective

Check whether pagination communicates current location and disabled navigation states.

PREPARE

Set up your test

  1. Turn on a screen reader you know how to operate.
  2. Navigate by controls or use Tab where the task asks you to.
  3. Listen for purpose and state, not one exact sequence of spoken words.

WORKING EXAMPLE

Establish the expected behavior

Navigate the pagination controls and listen for the current page and previous button state.

Showing results 1-10 of 28.

Expected behavior: the current page and disabled previous control are programmatically available.

INTENTIONAL DEFECT

Find the barrier

The example below deliberately contains one accessibility defect. Skip the defective example.

Navigate the pagination controls and determine whether the current page and unavailable action are exposed.

Showing results 1-10 of 28.

Hint

Visual gray and bold styles do not expose disabled or current state.

End of intentional defect.

DIAGNOSE

Choose the primary cause

What is missing from the defective pagination?

EXPLANATION

Understand and repair it

Reveal explanation

What happened

The defective pagination uses styling to imply state. Screen reader users may not know that page 1 is current or that Previous should not be available.

Repair

Use aria-current="page" on the current page link and real disabled controls or omitted unavailable actions where appropriate.

<a href="?page=1" aria-current="page">1</a>
<button type="button" disabled>Previous</button>

Retest

  • Navigate each control and confirm the current page is announced.
  • Confirm unavailable previous or next actions are not presented as active links.
  • Confirm the result range is available near the pagination.

Report it

Example: Pagination indicates the first page and disabled Previous action only visually, so screen reader users cannot identify the current page or unavailable control.

Standards and support

This exercise describes behavior rather than promising identical speech across screen reader and browser combinations.

Editorially reviewed 20 July 2026.