Screen Reader Guide

SCREEN READER FOUNDATIONS

0 of 20
Course progress: 0 / 20 lessons

PRACTICE 2 OF 5 · Foundations

Headings and landmarks

Navigate a page by structure and find content that is only visually organized.

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

Check whether sections are exposed through real headings and landmarks.

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 by headings or landmarks. Confirm that the structure matches the visible page sections.

Profile

Name, role, and contact preferences.

Security

Password and two-step verification settings.

Expected behavior: headings and landmarks provide useful navigation targets that match the visible organization.

INTENTIONAL DEFECT

Find the barrier

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

Navigate by headings or landmarks. Determine whether the visible structure is available.

Account sections
Profile

Name, role, and contact preferences.

Security

Password and two-step verification settings.

Hint

Check what appears in a headings list or landmarks list, not only what you can see.

End of intentional defect.

DIAGNOSE

Choose the primary cause

What is the primary problem with the defective page section?

EXPLANATION

Understand and repair it

Reveal explanation

What happened

The defective example uses styled text and generic containers. The page looks organized, but assistive technology does not receive the same structure.

Repair

Use native headings and landmark elements when they represent real page structure. Add labels when a landmark needs a specific purpose.

<nav aria-label="Account sections">...</nav>
<main>
  <section aria-labelledby="profile-heading">
    <h2 id="profile-heading">Profile</h2>
  </section>
</main>

Retest

  • Open the headings list and confirm the section names appear in a useful order.
  • Open the landmarks list and confirm the navigation and main areas are identifiable.
  • Confirm the visual heading text still matches the programmatic heading text.

Report it

Example: The account page uses visual section labels instead of headings, so screen reader users cannot navigate the page by its visible structure.

Standards and support

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

Editorially reviewed 20 July 2026.