BPOW: Modal window focus management

By August 23rd, 2013

Modal windows are up in this week's Best Practice of the Week (BPOW): For what appears to be such a simple concept, modal windows create incredibly complex interactions on the web. For users that rely on devices and software other than a mouse to navigate, the complexity is increased.

For what appears to be such a simple concept, modal windows create incredibly complex interactions on the web. For users that rely on devices and software other than a mouse to navigate, the complexity is increased.

When using modals we want to ensure that we manage focus explicitly for these users to ensure that they can access all of the information on a web page with ease. This includes:

  • Placing focus on the modal when it is launched, preferably on the heading element that serves as the title of the modal.
  • While the modal is open, only the controls within the dialog are able to receive focus. However, we allow focus to return to the browser chrome so the user may navigate away from the page, e.g. backward or forward in history, or away from the page entirely or perform other browser related functions.
  • Return focus to the element that activated the modal when the modal is closed using the Esc key or via the close button.

Our accessible modals example page provides a great illustration of all of these principles.

Tagged with: