Course progress: 0 / 20 lessons

PRACTICE 8 OF 9 · Controls and navigation

Menu button

Open a dropdown menu and test expanded state, menu item navigation, Escape, and focus return.

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

Verify that menu buttons expose the menu relationship and support expected keyboard interaction.

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 menu. Use Arrow Down and Escape. Listen for expanded state and menu items.

Expected behavior: the button exposes menu state and keyboard users can move through and dismiss the menu.

INTENTIONAL DEFECT

Find the barrier

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

Open the visual menu and try arrow keys and Escape.

Hint

Generic div options may be visible but not keyboard-reachable menu items.

End of intentional defect.

DIAGNOSE

Choose the primary cause

What is wrong with the defective menu button?

EXPLANATION

Understand and repair it

Reveal explanation

What happened

The defective menu opens visual options but does not expose a menu relationship, menu items, expanded state, or expected keyboard behavior.

Repair

Use a proven menu button pattern. For simple navigation, a disclosure with links may be easier and more appropriate than an ARIA menu.

<button aria-haspopup="menu" aria-expanded="false">Actions</button>
<div role="menu">
  <button role="menuitem">Rename</button>
</div>

Retest

  • Open the menu and confirm expanded state changes.
  • Use arrow keys to move through items.
  • Use Escape and confirm focus returns to the menu button.

Report it

Example: The Actions button opens visual options that are not exposed as menu items and cannot be navigated with expected menu keyboard behavior.

Standards and support

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

Editorially reviewed 20 July 2026.