Aria Modal

title: "ARIA Modal — Using aria-modal for Screen Reader Support" description: "Learn how the aria-modal attribute tells screen readers that content outside the modal is unavailable, improving the modal browsing experience." weight: 4 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, modals]

aria-modal="true" tells assistive technologies that content outside the dialog is inert and should not be accessible until the dialog is closed.

## What You'll Learn

How aria-modal works, how it affects screen reader behavior, and when to use it with focus trapping.

## Why It Matters

Without aria-modal, screen reader users can use virtual cursor navigation to reach background content, causing confusion about which content is currently interactive.

## Real-World Use

A screen reader user opens a modal. The focus trap keeps keyboard focus inside. aria-modal="true" tells the screen reader that content behind the modal is not available. The user cannot accidentally navigate to background content.

## Aria-modal Usage

```html
<div role="dialog" aria-modal="true"
     aria-labelledby="dialog-title"
     class="modal-overlay">
  <div class="modal-content">
    <h2 id="dialog-title">Confirm action</h2>
    <p>Do you want to proceed?</p>
    <button onclick="confirm()">Yes</button>
    <button onclick="closeDialog()">No</button>
  </div>
</div>

CSS for Modal

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
  max-width: 500px;
  width: 90%;
}

Common Mistakes

1. aria-modal without role=dialog

aria-modal is only meaningful on elements with role=dialog or role=alertdialog.

2. aria-modal="false" on modals

If the content behind is not interactive, use aria-modal="true".

3. Relying only on aria-modal for focus

aria-modal does not trap keyboard focus. You need a separate focus trap implementation.

4. Not setting aria-hidden on background

For additional safety, set aria-hidden="true" on the root content container when the modal is open.

5. aria-modal not removed on close

When the modal closes, remove the aria-modal attribute or remove the dialog element from the DOM.

Practice Questions

1. What does aria-modal="true" tell screen readers? That content outside the dialog is not available for interaction or navigation.

2. Does aria-modal replace focus trapping? No. aria-modal is a hint for screen readers. Focus trapping must be implemented separately.

3. What additional attribute can help isolate screen readers in a modal? Setting aria-hidden="true" on the main page content container when the modal is open.

Challenge: Build a modal that uses both aria-modal="true" and a focus trap. Verify that screen readers cannot navigate outside the modal.

FAQ

Mini Project

Create a modal with both aria-modal="true" and the inert attribute on background content. Test that screen readers cannot access background content while the modal is open.

What's Next

Learn how to implement a Focus Trap for Modal to keep keyboard focus cycling within the dialog.