A modal dialog should declare aria-modal

Rule dialog-modal · Component patterns (best practice) · impact minor · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

aria-modal="true" tells assistive technology that content outside the dialog is inert while it is open, so AT confines reading to the dialog. Omitting it can let screen-reader users wander out of a modal.

How to fix#

Add aria-modal="true" to modal dialogs (and actually keep focus and AT inside the dialog while open); declare aria-modal="false" on intentionally non-modal dialogs. Native

<div role="dialog" aria-label="Confirm">Are you sure?</div>

<div role="dialog" aria-label="Confirm" aria-modal="true">Are you sure?</div>

<div role="dialog" aria-label="Chat">Hi there</div>

<dialog aria-label="Settings"><button>Close</button></dialog>