Screen Reader Guide

SCREEN READER FOUNDATIONS

0 of 20
Course progress: 0 / 20 lessons

PRACTICE 5 OF 9 · Controls and navigation

Current page and selected state

Navigate page links and tabs where the active item must be exposed programmatically.

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

Distinguish current-page state from selected tab state and verify the correct semantics.

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 links and tabs. Listen for the current page and selected tab states.

Daily report tab panel.

Expected behavior: links expose current-page state and tabs expose selected state.

INTENTIONAL DEFECT

Find the barrier

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

Navigate the links and tab-like buttons. Determine whether the active visual state is announced.

Daily report tab panel.

Hint

Bold or highlighted text is not the same as an exposed current or selected state.

End of intentional defect.

DIAGNOSE

Choose the primary cause

What is missing from the defective active states?

EXPLANATION

Understand and repair it

Reveal explanation

What happened

The defective interface marks active items only with CSS. Screen reader users may hear the links and buttons but not know which page or tab is active.

Repair

Use aria-current="page" for the current navigation link. Use the tabs pattern and aria-selected for real tab interfaces.

<a href="/profile/" aria-current="page">Profile</a>
<button role="tab" aria-selected="true">Daily</button>

Retest

  • Navigate to the active page link and confirm it is announced as current.
  • Navigate to the selected tab and confirm selected state is announced.
  • Confirm only one item in the set exposes the active state when that is the design intent.

Report it

Example: The active Profile link is highlighted visually but lacks current-page semantics, so screen reader users cannot identify the current section from the navigation.

Standards and support

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

Editorially reviewed 20 July 2026.