A modal must offer a keyboard-reachable way to close

What it is

A dialog that can be closed only with a pointer leaves keyboard and switch users inside it. Keyboard-reachable dismiss requires at least one leave path that does not need a mouse: usually Escape, plus a Close or Cancel button that can take focus. It is not about whether focus is trapped inside — that is capture. It is about how someone who is inside gets out. Tapping the scrim is a pointer channel and cannot stand in for this one.

Why it happens

A keyboard user’s world has no “click outside.” Without Escape, and with Close kept out of the tab order, leaving is guessing at a shortcut or refreshing the page; modality turns from a block into confinement. Escape’s convention is cancel, not submit: it should take the same path as Cancel and drop uncommitted input, not save quietly. Destructive or irrevocable decisions may refuse to let Escape complete them, but Cancel must still be reachable from the keyboard and must name the consequence. A close “×” painted in the corner and left out of the focus order is decoration. On mobile there is often no Escape key; the constraint moves onto the system Back gesture and a focusable close control. Missing the key is not a licence to omit the leave path.

Studying it

Forbid the pointer. Open and close the dialog with the keyboard only. Compare Escape present, only a focusable Cancel, and neither. Record successful leaves, mistaken submits (meant to close, pressed Enter), and resorts to refresh. Independent variables: whether Escape is bound to cancel, whether the default button is submit, whether the close control is focusable. Dependent variables: leave success, accidental submit. Accidental submit should peak when the default is submit and Escape is absent.

Where it stops holding

During an uninterruptible step (payment in flight, a write in flight), close itself is illegal; keyboard dismiss should do nothing and say why leaving is refused. That is a temporary refusal of the path, not omission of the path. Custom drawing surfaces and game canvases may already bind Escape for content; while the dialog is open the binding must change, or a clearly named Cancel becomes the only keyboard exit. Screen-reader users depend on the button’s name; an unnamed “×,” even if focusable, is not reachable in any useful sense.

Applying it

• Bind Escape to the cancel path. While the dialog is open, do not let Escape fall through and dismiss something on the layer below.
• Provide a focusable, named Cancel or Close; do not rely on an unfocusable “×.”
• Point Enter’s default button at a safe action, so “trying to leave” does not submit.
• How to check: unplug the mouse or disable the trackpad, open the dialog, and leave. If that is impossible, keyboard dismiss does not exist.

Related

• Within the group: E4.10.1 A modal blocks the main flow and belongs only on matters that must be answered · E4.10.2 A modal must trap focus and restore it on close · E4.10.3 A modal should not open another modal
• Adjacent: E4.16 Overlay stacking and escape · E4.09 Drawers
• Search terms: Escape key · dialog cancel · keyboard dismiss