PRACTICE 6 OF 9 · Controls and navigation
Pagination
Move through page controls and listen for current page, unavailable actions, and result range.
Check whether pagination communicates current location and disabled navigation states.
PREPARE
Set up your test
- Turn on a screen reader you know how to operate.
- Navigate by controls or use Tab where the task asks you to.
- 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
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.
- WAI-ARIA: aria-current
- WCAG 2.2: Understanding Name, Role, Value
- WCAG 2.2: Understanding Info and Relationships
Editorially reviewed 20 July 2026.