An open dialog must contain focusable content

Rule dialog-focusable-content · Component patterns (best practice) · impact serious · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

When a dialog opens, focus moves inside it and is trapped there. A dialog with no focusable element has nowhere to put focus, breaking the modal interaction for keyboard users.

How to fix#

Ensure a rendered dialog contains a focusable control (a close button, a field, or a focusable container with tabindex="-1").

Example#

<div role="dialog" aria-label="Info"><p>Saved.</p></div>

<div role="dialog" aria-label="Info"><p>Saved.</p><button>Close</button></div>

WCAG success criteria#

2.1.1 Keyboard — Level A#

All functionality must be operable through a keyboard alone (composite widgets need roving tabindex or aria-activedescendant so every control is reachable and operable).

Understanding 2.1.1

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549 Best practice

References#

• APG — Dialog (Modal)