Dialog or pop-up is hard to use with a keyboard

Why does it matter?

Newsletter pop-ups, mobile menus and lightboxes are where keyboard and screen reader users most often get lost. If focus stays behind the pop-up, they keep tabbing through a page they cannot see; if it has no name or cannot be closed with Escape, they may not know what opened or how to leave.

Who it affects: Keyboard, screen reader and low-vision users — every visitor meets the page title, language, landmarks, keyboard focus, target sizes and zoom settings on every page.

What does Lumtera flag?

Found by the widget tests (review mode's Keyboard tab, "Test menus and pop-ups"). Lumtera opens each dialog it finds a trigger for, including the Navigation block's mobile overlay and Elementor and Divi pop-ups, and checks it. For review: the dialog has no name (ARIA asks for one; whether its absence fails WCAG is debated), focus does not move into it within half a second, it is not marked as modal, Escape does not close it, or focus does not go back to the button that opened it. A combobox labelled by a <label> element counts as named. A tip reminds you to check by hand that Tab stays inside it.

Check ID page-dialog, as shown in review mode and saved results.

How do I fix it in WordPress?

Use the <dialog> element opened with showModal(), or a container with role="dialog", aria-modal="true" and aria-labelledby pointing at its heading. Move focus into it when it opens, close it on Escape, and move focus back to the button that opened it. For pop-up plugins and page builders, look for an accessibility setting, or ask the author.

Example

<div class="popup">
  <h2>Join our newsletter</h2> …
</div>

<div class="popup" role="dialog" aria-modal="true" aria-labelledby="popup-title">
  <h2 id="popup-title">Join our newsletter</h2> …
</div>

How do I check the fix?

1. Reload the page in review mode and run the Keyboard tab again (or Test menus and pop-ups for menus, dialogs and tabs). The finding disappears once the page passes.
2. Load the page and press Tab: a "Skip to content" link should appear first, and you should always see where focus is, even under a sticky header. Pinch-zoom on a phone, and check the browser tab shows a meaningful title.