WEBVTT

00:00:00.000 --> 00:00:06.000
What makes a dialog modal?

00:00:06.000 --> 00:00:13.000
It holds interaction inside the dialog while the background is unavailable.

00:00:13.000 --> 00:00:18.000
Keep the task and the way out clear.
6 modal-dialog checks.

00:00:18.000 --> 00:00:30.000
Give the dialog a clear purpose
Use it for a defined task that justifies interrupting the page.
Specific task · Clear heading · Relevant content

00:00:30.000 --> 00:00:42.000
Move focus inside on opening
The initial position should suit the dialog content and task.
Initial focus · Suitable control or content · Readable opening

00:00:42.000 --> 00:00:54.000
Keep keyboard focus contained
Tab navigation should remain within the active modal dialog.
Active modal · Contained tab sequence · Unavailable background

00:00:54.000 --> 00:01:06.000
Provide a visible way to close
A suitable close or cancel control should be easy to find.
Visible close control · Clear cancel action · Keyboard dismissal

00:01:06.000 --> 00:01:18.000
Return focus logically
After closing, focus normally returns to the opener or an appropriate next step.
Original opener · Logical next step · Continued task

00:01:18.000 --> 00:01:30.000
Test the whole dialog journey
Check the keyboard, assistive technology and small-screen presentation.
Open and use · Close and return · Real device layout

00:01:30.000 --> 00:01:39.000
Your checklist
Give the dialog a clear purpose · Move focus inside on opening · Keep keyboard focus contained · Provide a visible way to close · Return focus logically · Test the whole dialog journey

00:01:39.000 --> 00:01:47.000
Test opening, completing, closing and returning focus.
jerseyweb.je