Screen Reader Guide

SCREEN READER FOUNDATIONS

0 of 20
Course progress: 0 / 20 lessons

PRACTICE 1 OF 5 · Foundations

Accessible names

Find an icon button that has no meaningful name and repair what a screen reader exposes.

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

Determine whether a control exposes a name that communicates its purpose.

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 to the icon button below. Confirm that its announced name communicates what activation will do.

Your report is ready.

Expected behavior: the control is exposed as a button named “Close notification”. Speech order and wording may vary.

INTENTIONAL DEFECT

Find the barrier

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

Navigate to the icon button. Determine whether its name communicates what it does.

Your report is ready.

Hint

Ignore how the control looks. What purpose can you determine from the accessibility information?

End of intentional defect.

DIAGNOSE

Choose the primary cause

Why does the defective button fail to communicate its purpose?

EXPLANATION

Understand and repair it

Reveal explanation

What happened

The multiplication symbol is hidden from assistive technology and the button has no other naming content. A screen reader can expose the role, but not a useful name.

Repair

Visible button text is usually the clearest option. When the design genuinely requires an icon-only button, provide a concise name that describes its purpose.

<button type="button" aria-label="Close notification">
  <span aria-hidden="true">&times;</span>
</button>

Retest

  • Navigate to the button and confirm that its name communicates the action.
  • Activate it with the screen reader and with the keyboard alone.
  • Confirm that the same name remains useful wherever the control appears.

Report it

Example: The close button for the notification has no accessible name, so screen reader users cannot determine its purpose.

Standards and support

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

Editorially reviewed 20 July 2026.