Screen Reader Guide

SCREEN READER FOUNDATIONS

0 of 20
Course progress: 0 / 20 lessons

PRACTICE 1 OF 8 · Complex widgets and data

Dialog announcement

Open a dialog and test its name, initial focus, focus containment, and close behavior.

  • Level: Intermediate
  • Time: 10-15 minutes
Objective

Verify that modal dialogs are announced and managed as dialogs, not ordinary hidden content.

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

Open the dialog. Confirm it has a name, focus moves inside it, Tab stays inside it, and closing returns focus.

Expected behavior: the opened component is announced as a named dialog and focus is deliberately managed.

INTENTIONAL DEFECT

Find the barrier

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

Open the modal-like content. Listen for whether it is announced as a dialog and check where focus goes.

Hint

The content looks modal, but check its role, name, and initial focus behavior.

End of intentional defect.

DIAGNOSE

Choose the primary cause

What is the main issue with the defective modal?

EXPLANATION

Understand and repair it

Reveal explanation

What happened

The defective modal is ordinary content shown visually. It lacks dialog semantics, has no programmatic name, and does not manage focus as a modal interaction.

Repair

Use a real dialog pattern: expose role="dialog", provide an accessible name, move focus inside, contain focus while modal, close predictably, and return focus to the opener.

<div role="dialog" aria-modal="true" aria-labelledby="delete-title">
  <h2 id="delete-title">Delete file?</h2>
  <button type="button">Cancel</button>
</div>

Retest

  • Open the dialog and confirm the role and name are announced.
  • Confirm initial focus lands on a useful element inside the dialog.
  • Tab through the dialog and confirm focus does not move behind it.
  • Close it and confirm focus returns to the opener.

Report it

Example: The delete confirmation appears visually as a modal but is not exposed as a named dialog, so screen reader users may not understand that a modal decision is required.

Standards and support

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

Editorially reviewed 20 July 2026.