- Success Criterion 2.4.3
- Conformance level A
Escape Key Closing the Wrong Layer in a Nested Dialog
2.4.3 — Focus Order
Scenario
Setting
A public library's catalog search
What’s wrong
Pressing Esc inside a nested layer (a dropdown or combobox open inside a modal) closes the entire modal instead of just the innermost layer — the user is dumped out mid-task and loses their work in the dialog.
Example
On a public library's catalog search: pressing Esc inside a nested layer (a dropdown or combobox open inside a modal) closes the entire modal instead of just the innermost layer — the user is dumped out mid-task and loses their work in the dialog.
Why it matters
Keyboard and screen-reader users who follow focus rather than the pointer. On a public library's catalog search specifically, they lose track of where they are on the page.
How to test
Open a dropdown inside a modal, then press Esc: check whether only the dropdown closes (correct) or the entire modal closes too (fails), dumping the user out mid-task.
How to fix
Close only the innermost open layer on Esc (dropdown first, modal on the next Esc).
Outcome
Fixed, a visitor to a public library's catalog search can complete the task using only the keyboard.
Who is affected
Keyboard and screen-reader users who follow focus rather than the pointer.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Tab Order That Jumps Around the Page Illogically
- Dialog That Opens Far From the Button That Triggered It
- Visual Layout Order That Doesn’t Match the Keyboard Tab Order
- Modal That Opens Without Moving Keyboard Focus Into It
- Modal That Closes Without Returning Focus to Its Trigger
- Expanded Content That Never Receives Keyboard Focus