Screen Reader Guide

SCREEN READER FOUNDATIONS

0 of 20
Course progress: 0 / 20 lessons

PRACTICE 1 OF 9 · Controls and navigation

Focus order

Tab through a small task flow and compare visual order with keyboard focus order.

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

Determine whether focus follows a logical sequence that preserves meaning and operation.

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

Use Tab to move through the controls. Listen for whether the sequence matches the task.

Expected behavior: focus moves through the fields and action in the same logical order a user needs to complete the task.

INTENTIONAL DEFECT

Find the barrier

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

Use Tab to move through the controls. Compare the focus order with the visual order.

Hint

The CSS changes the visual order, but keyboard focus still follows the DOM order.

End of intentional defect.

DIAGNOSE

Choose the primary cause

Why is the defective focus order a barrier?

EXPLANATION

Understand and repair it

Reveal explanation

What happened

The action appears after the fields but comes first in the DOM. Keyboard and screen reader users encounter the task ending before the task inputs.

Repair

Keep the DOM order aligned with the meaningful visual sequence. Avoid using CSS ordering to create a different operational order for interactive content.

<label for="plan-name">Plan name</label>
<input id="plan-name">
<label for="plan-owner">Owner</label>
<input id="plan-owner">
<button type="button">Review plan</button>

Retest

  • Tab from the start of the component and record each focused element.
  • Confirm focus order preserves the visible relationships and task sequence.
  • Repeat with zoom or responsive layouts if the order changes visually.

Report it

Example: Keyboard focus reaches “Review plan” before the required fields, so the focus order does not match the visible task sequence.

Standards and support

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

Editorially reviewed 20 July 2026.