• Success Criterion 2.1.1
  • Conformance level A

Overlay or Menu With No Keyboard-Operable Close Control

2.1.1 — Keyboard

Scenario

Setting

An e-book reader's library page

What’s wrong

An overlay or menu has no close control that keyboard or screen reader users can operate — it can only be closed by tapping or clicking outside it.

Example 

document.addEventListener('click', (e) => {
  if (!detailsPanel.contains(e.target)) detailsPanel.classList.add('hidden');
});
// there is no close button and no Escape key handler

Why it matters

A reader using only a keyboard can open a book's details panel but has no way to close it and return to browsing the library.

How to test

Tab into an open overlay/menu and look for a close control: if the only way to close it is clicking outside, keyboard users can't dismiss it.

How to fix

Every overlay needs both a visible, focusable close control and an Escape handler; click-outside should only ever be a convenience add-on.

<button class="close-btn" onclick="closePanel()" aria-label="Close book details">×</button>
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') closePanel();
});

Outcome

A reader presses Escape or tabs to the close button and returns straight to browsing the library.

Who is affected

Keyboard-only users and screen reader users become stuck inside the overlay with no operable exit.

Learn more

Related scenarios