Trapping Focus Inside the Modal
Keep Tab from escaping to the page behind.
Why Focus Must Stay In
While a modal is open, keyboard focus should stay inside it. If Tab escapes to the page behind, blind users get lost in content they cannot see.
The Native Element Helps
A real dialog opened with showModal() traps focus for you automatically, which is one big reason to prefer it over a div.
All lessons in this course
- Dialog Roles and the Native dialog Element
- Trapping Focus Inside the Modal
- Escape to Close and Restore Focus
- Inert Background and aria-modal