hardScenarioConceptCodingMidSeniorStaff
A modal passed design and QA review, but keyboard users report they can tab out of it into the page behind, and once they do they cannot get back or close it. Diagnose it and tell me what a correct dialog does.
The dialog was built as a styled div, so nothing marks the rest of the page inert. Focus was never moved in, never constrained, never restored on close, and Escape was never wired. A correct dialog moves focus in, keeps it in, restores it, marks background inert and is labelled - which native dialog with showModal gives you almost for free.
4 min readUpdated 2026-08-16Target archetype: Big Tech, Product Startup, Enterprise Captive
Answer
Short answer
It is a div with an overlay, not a dialog. The visual layer covers the page for sighted mouse users and does nothing for anyone else: focus was never moved into it, nothing constrains focus while it is open, nothing restores focus when it closes, and Escape is unbound. A correct modal manages focus on all three edges — in, within, and out — and marks everything behind it inert.
Was this answer helpful?
Likely follow-ups
- What is the difference between a focus trap and a keyboard trap, and which one is a WCAG failure?
- Where exactly should focus go when the dialog opens? When would the close button be wrong?
- What does inert give you that aria-hidden does not?
- The native dialog element handles some of this. What is still left for you to implement?
- How would you catch this automatically, given that axe on a static page will not?
Related questions
- Design rejected the native control, so you are building a custom one. How do you make it accessible?hardAlso on accessibility and aria5 min
- This form marks invalid fields with red text and a red border. What has to change?mediumAlso on accessibility and wcag4 min
- A toast pops up saying the changes were saved, and a screen reader user hears nothing. Why, and what do you change?mediumAlso on accessibility and aria5 min
- How do you implement a scalable architecture and tooling to automatically enforce strict WCAG 2.1 AA compliance across dozens of autonomous frontend teams without crippling developer velocity?hardAlso on accessibility and wcag3 min