View the library of solutions.
A modal window is a web dialog box which appears upon a user action which launches it. An interstitial is a modal-like window which appears on page load.
Focus should go to the first actionable element when the modal is opened. This should be the close modal button.
Focus should go to the dialog box itself. This will cause the screen reader to read the entire intersitial content.
If the box is a modal, focus should go to the triggering mechanism if it still exists. Otherwise it should go to the <body>.
If the box is an interstitial, focus should go to the <body>.
The dialog window should have a role="dialog".
When using role="dialog" it is imperative that you place all dialog content within a nested container having a role="document". Otherwise, in some browsers content that doesn't gain focus will not be read.
You are mimicking an operating system dialog wherein there is no way to leave the dialog without either:
A web dialog box should mimic this behavior. As long as the user has a way out either by using the close button or by hitting “ESC” the modal is fine. It is acceptable that the user is unable to reach the browser chrome while the modal window is active.
Make sure the close button has descriptive screen-reader-text which says something like "close dialog box" (just "close" or "close window" is too confusing).