Screen Reader Guide

SCREEN READER FOUNDATIONS

0 of 20
Course progress: 0 / 20 lessons

PRACTICE 4 OF 9 · Controls and navigation

Disclosure and accordion

Expand a section and confirm the control exposes its name and expanded state.

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

Check whether disclosure controls are buttons with an available expanded or collapsed state.

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 control, expand it, collapse it, and listen for state changes.

Expected behavior: the control is a button and exposes whether the controlled content is expanded or collapsed.

INTENTIONAL DEFECT

Find the barrier

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

Try to operate the visible disclosure and determine whether its state is exposed.

Billing details

Invoices are sent to the billing contact on the first day of each month.

Hint

Visual affordance does not make generic text a keyboard-operable disclosure button.

End of intentional defect.

DIAGNOSE

Choose the primary cause

What is missing from the defective disclosure?

EXPLANATION

Understand and repair it

Reveal explanation

What happened

The defective disclosure is visually styled but not exposed as an interactive control. It also does not communicate expanded or collapsed state.

Repair

Use a button for the control and keep aria-expanded synchronized with the visible panel state.

<button type="button"
  aria-expanded="false"
  aria-controls="billing-panel">
  Billing details
</button>
<div id="billing-panel" hidden>...</div>

Retest

  • Tab to the control and confirm it is announced as a button.
  • Activate it with Enter and Space.
  • Confirm the expanded or collapsed state changes correctly.

Report it

Example: The billing details disclosure is not a button and does not expose expanded state, so screen reader users may not know it controls collapsible content.

Standards and support

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

Editorially reviewed 20 July 2026.