Comprehensive Guide

Accessible Modal Dialogs

Focus trapping, keyboard controls, and proper announcements

Modal Dialog Fundamentals

Modal dialogs interrupt the user's workflow. The key ARIA attributes are role='dialog', aria-modal='true', and aria-labelledby to connect the dialog to its title.

role='dialog'

Tells screen readers this is a dialog requiring user attention before returning to the main content.

aria-modal='true'

Indicates the dialog is modal—content behind it is inert and shouldn't be accessible.

aria-labelledby

Points to the dialog's title element. Users hear "Dialog: [title]" when it opens.

Interactive Demo

Click the button to open an accessible modal. Try pressing Escape, clicking outside, or using Tab.

Don't: Generic Div

<!-- ❌ INACCESSIBLE -->
<div class="modal">
  <div class="modal-content">
    <span onclick="close()">&times;</span>
    <h2>My Modal</h2>
  </div>
</div>

Do: Semantic Dialog

<!-- ✅ ACCESSIBLE -->
<div role="dialog" 
     aria-modal="true" 
     aria-labelledby="dialog-title">
  <h2 id="dialog-title">Confirm</h2>
  <button aria-label="Close">×</button>
</div>

Use Native <dialog> When Possible

The HTML <dialog> element with showModal() provides focus trapping and Escape handling automatically.