Modal Dialogs Explained: Focus, Closing and Returning to the Page

The six points in the video

This is a silent video. The headings, explanations and labels below reproduce the information on screen.

1. 1

   Step 1: Give the dialog a clear purpose

   0:18

   Use it for a defined task that justifies interrupting the page.

   On-screen labels: Specific task; Clear heading; Relevant content.

2. 2

   Step 2: Move focus inside on opening

   0:30

   The initial position should suit the dialog content and task.

   On-screen labels: Initial focus; Suitable control or content; Readable opening.

3. 3

   Step 3: Keep keyboard focus contained

   0:42

   Tab navigation should remain within the active modal dialog.

   On-screen labels: Active modal; Contained tab sequence; Unavailable background.

4. 4

   Step 4: Provide a visible way to close

   0:54

   A suitable close or cancel control should be easy to find.

   On-screen labels: Visible close control; Clear cancel action; Keyboard dismissal.

5. 5

   Step 5: Return focus logically

   1:06

   After closing, focus normally returns to the opener or an appropriate next step.

   On-screen labels: Original opener; Logical next step; Continued task.

6. 6

   Step 6: Test the whole dialog journey

   1:18

   Check the keyboard, assistive technology and small-screen presentation.

   On-screen labels: Open and use; Close and return; Real device layout.

Common questions

Go further