Modal dialog boxes
 
Focus your user's attention on to a single piece of content, without taking them to a new screen
 

Guidance

 
 

Discussion

 
One view is:
If you need to focus your user's attention on to a single piece of content, without taking them to a new screen then modal dialog boxes may be an appropriate way to do that.
 
Another view is:
They offer considerable problems for some types of users, especially low skills/low confidence users who may be struggling to understand the basic layout and use of the ordinary screens and don't need to be confronted with another sort of dialog box. 
 
Typically, we reach for modal dialog boxes  because the page has become too complicated. Try simplifying and  splitting up the underlying page first. 
 
Before you even consider a modal dialog box, make sure that you have strong evidence that:
  1. There is a real user need to have attention focused on a single piece of content AND
  1. That need cannot be met by taking the user to a new page in the same flow that contains the crucial piece of content. 
 
 
 
 
 
Make sure the modal dialog box is accessible
If you use a modal dialog box then you must make sure it is accessible by doing these things:
 
  • set the role attribute to 'dialog'
  • on open, keyboard focus must be assigned to the dialogue (give it tabindex=1 to allow this)
  • give the dialog a name using either aria-label (to put the name in an attribute) or aria-labelledby (to link it to the id of an element with its name like a heading) that is recognised by assistive technologies
  • whilst open, keyboard focus must be constrained within the dialogue
  • it must be possible to close the dialogue via a close button and/or with the escape key
  • on close, keyboard focus must be returned to the original point on the page
  • give the containing element of the dialogue the 'dialog' role. This will inform screen readers they’re dealing with a dialogue
  • visually fade the underlying page whilst a modal dialogue is open. This helps users of screen magnifiers understand why they’re unable to interact with the underlying page
  • prevent scrolling of the underlying page whilst a modal dialog is open. The user should not be able to interact with the original page whilst it's open.
  • test thoroughly on a range of screen sizes to make sure they work properly
 
  • Online references
 
 

Examples on GOV.UK 

 
 
Civil claims
We now use a modal window on our civil claims project, here is what it looks like.