Screen Reader Guide

SCREEN READER FOUNDATIONS

0 of 20
Course progress: 0 / 20 lessons

PRACTICE 3 OF 8 · Complex widgets and data

Autocomplete suggestions

Type in a search field and test whether suggestions can be discovered and selected.

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

Recognize when autocomplete suggestions need combobox semantics, keyboard support, and status updates.

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

Type “pro” in the search field. Listen for suggestion availability and use Arrow Down to move through options.

Expected behavior: suggestion availability is announced and options are reachable from the field.

INTENTIONAL DEFECT

Find the barrier

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

Type “pro” in the search field. Determine whether suggestions are announced and navigable.

Hint

Visible suggestions are not enough if the input does not expose a relationship or keyboard model.

End of intentional defect.

DIAGNOSE

Choose the primary cause

Why is the defective autocomplete difficult to use?

EXPLANATION

Understand and repair it

Reveal explanation

What happened

The defective autocomplete inserts visible suggestions, but the input does not expose the popup relationship, expanded state, active option, or a keyboard path through the results.

Repair

Use a proven combobox implementation. Keep role, expanded state, controlled popup, active descendant, keyboard behavior, and status messaging synchronized.

<input role="combobox"
  aria-autocomplete="list"
  aria-expanded="true"
  aria-controls="product-suggestions"
  aria-activedescendant="product-1">
<ul id="product-suggestions" role="listbox">
  <li id="product-1" role="option">Project dashboard</li>
</ul>

Retest

  • Type a query and confirm suggestion availability is announced.
  • Use Arrow Down and Arrow Up to move through suggestions.
  • Use Enter to select a suggestion and confirm the input value changes.
  • Confirm Escape closes the suggestion list without losing focus.

Report it

Example: Search suggestions appear visually after typing, but they are not exposed as related options and cannot be selected with the expected keyboard interaction.

Standards and support

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

Editorially reviewed 20 July 2026.