• Success Criterion 1.3.2
  • Conformance level A

Modal Dialog Placed at the End of the Page Code

1.3.2 — Meaningful Sequence

Scenario

Setting

A government tax-filing portal

What’s wrong

Modal/dialog markup at end of page code (DOM) with no focus management, read after unrelated content (interacts with 2.4.3).

Example 

<body>
  <header>...</header>
  <main>... tax form ...</main>
  <footer>... links, disclaimers ...</footer>
  <div id="session-modal" class="modal" style="display:none;">
    <p>Your session will expire in 2 minutes.</p>
    <button>Stay logged in</button>
  </div>
</body>

Why it matters

A screen reader user filling out tax fields gets no announcement that a session-expiry warning appeared, and would have to read past the entire footer to find it before time runs out.

How to test

Tab into an open modal and check DevTools: if its markup sits at the end of the DOM and focus isn't moved into it, a screen reader reads unrelated page content first.

How to fix

The broken version's JavaScript only toggles display:none off to reveal the modal, without moving focus or adding role="dialog", so move focus into the dialog the instant it opens, mark it with role="dialog" and aria-modal, and return focus on close, regardless of where the markup sits in the document.

<div id="session-modal" role="dialog" aria-modal="true" aria-labelledby="session-title">
  <h2 id="session-title">Your session will expire in 2 minutes</h2>
  <button id="stay-btn">Stay logged in</button>
</div>

Outcome

Filling out their return, a screen reader user now hears the expiry warning right away and can respond in time.

Who is affected

Screen reader users and keyboard-only users get no alert and no focus shift, so they can lose unsaved tax data when the session times out silently.

Learn more

Related scenarios