Blog
ArticleAccessibility3 min read

A Modal Review Starts Before the Dialog Opens

The closed state, focus movement, error recovery, and return path all matter. A screenshot of an open dialog covers only part of the interaction.

By Design Audit Team

Start at the trigger

Consider a dialog for renaming a saved project. Reach the trigger with the keyboard and activate it. Check that its label describes the action and that the dialog has an accessible name identifying its purpose. A visually clear panel can still be difficult to understand without those relationships.

Initial focus should suit the content. A short rename dialog may place it in the input; a longer dialog may need to establish the reading context first. Do not assume that placing focus on the first button is appropriate for every design.

Follow focus inside the dialog

For a modal dialog, background content should not remain interactable while the modal is active. Follow focus forward and backward, and check that it remains within the modal rather than disappearing into the obscured page.

A screenshot cannot establish this behavior. Inspect the actual interaction, including a clear way to close the dialog. Use the W3C dialog pattern as implementation guidance and assess the relevant accessibility requirements in the wider page context.

Try an unsuccessful submission

Submit an empty project name. Can the person find the explanation and return to the relevant input without losing other valid work? An error should explain the required correction; a red border alone does not provide that instruction.

For destructive actions, read the action label in context. “Delete project” communicates more than “Confirm.” The wording, focus choice, and available cancellation path should all support a considered decision rather than relying on visual warning color alone.

Return to a sensible place

After closing the rename dialog, focus would ordinarily return to the control that opened it. If the action removes that control or the project itself, choose a logical place that lets the person continue. Sending focus to the start of the page can make the completed action unexpectedly disorienting.

Document the sequence you reviewed: open, navigate, submit invalid content, recover, complete, and return. This produces a specific interaction finding rather than a broad assertion that the dialog is accessible because its default appearance looks correct.

References and further reading

Continue learning

Explore your website with Design Audit

Submit a URL and turn the next review into a focused action plan.