Decide whether a dialog is necessary
A modal interrupts the current task and makes the surrounding page unavailable. That can be appropriate for a focused confirmation or preview, but a project description or ordinary navigation often works better directly on the page. Reducing unnecessary dialogs also reduces the amount of focus management the application has to get right.
Start with the native element
A dialog opened with showModal() has modal behavior that a styled div does not gain automatically. Give it a clear accessible name through a visible heading referenced by aria-labelledby. Use ordinary form controls and buttons inside it. Opening a dialog by changing CSS alone is different from invoking the browser’s modal dialog behavior.
Choose an intentional first focus target
The first focused item should fit the task. For a brief confirmation, a safe action may be appropriate. For longer explanatory content, focusing a meaningful introductory element can help people read before choosing. Do not add focusable wrappers everywhere; decide what the reader needs to understand when the modal first appears.
Provide more than a backdrop gesture
Include a visible close or cancel button with a meaningful accessible name. Test the supported keyboard dismissal behavior, including Escape, and consider whether any confirmation must happen before closing. Clicking outside may be a useful convenience for some dialogs, but it cannot be the only dismissal method a person is expected to discover.
Return to the original context
Remember the control that opened the dialog and verify that focus returns there when it closes. If that control no longer exists, select a sensible next location in the same workflow. A closing animation should not leave focus stranded in hidden content or move it to the start of the document without explanation.
Exercise the full lifecycle
Open the dialog with a keyboard, move through its controls, dismiss it, and continue the original task. Repeat after route changes and after removing a list item that opened the dialog. Confirm that the background is not reachable while modal and that repeated opening does not attach duplicate event listeners or create multiple overlapping instances.
Further reading
Put the idea to work.
Explore free browser tools for images, text and developer workflows.