PRACTICE 8 OF 9 · Controls and navigation
Menu button
Open a dropdown menu and test expanded state, menu item navigation, Escape, and focus return.
Verify that menu buttons expose the menu relationship and support expected keyboard interaction.
PREPARE
Set up your test
- Turn on a screen reader you know how to operate.
- Navigate by controls or use Tab where the task asks you to.
- 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
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.
- WAI-ARIA APG: Menu Button Pattern
- WCAG 2.2: Understanding Keyboard
- WCAG 2.2: Understanding Name, Role, Value
Editorially reviewed 20 July 2026.