Ensure that keyboard focus remains within modal simulated dialogs

The main navigation of the environment provides a button titled "Sites" that spawns a modal window designed to allow the user to see all sites associated with the environment. However, once spawned the dialog does not restrict focus within the boundaries of the dialog. Instead, a keyboard only user is able to tab out of the dialog and return to the page that spawned it. This can cause serious issues for both keyboard only users (who will not know what element they are currently focused on), as well as screen reader users (who will not realize they have navigated away from the model and are interacting with inactive content).

Developers must ensure that when a modal simulated dialog is open, focus remains within the dialog. This can be done by using onFocus and onBlur and other JavaScript techniques to manage the focus appropriately. There are many techniques that can be used to meet this best practices. Developers must ensure that tab and shift+tab are handled appropriately. Ideally focus should wrap from the last element to the first element. It may also be beneficial to hide the rest of the page content from the screen reader user by setting aria-hidden="true" on the other page content.

The tab order must not be restricted for non-modal windows which requires or allows users to interact with the background/parent content.

Developers must ensure that the modal dialog can be closed via the keyboard so that focus is not trapped in the dialog for users of keyboard only. When there is a keyboard operable close button there is not a keyboard trap.