What is a modal in UX design?
A modal, also called a dialog, is a UI component that appears as an overlay on top of the current page content. It temporarily blocks interaction with the underlying page and requires the user to either complete an action within the modal or explicitly dismiss it. Modals are used to present critical information, confirm destructive actions, collect required input, or display supplementary content without navigating away from the current page.
When should you use a modal in UX design?
Modals are appropriate for actions that require immediate user attention or a decision before continuing, such as confirming a destructive action like deleting data, collecting critical input that cannot be deferred, or presenting an alert that requires acknowledgment. They work well when the interaction is short and self-contained. Modals become problematic when used for content that is not urgent, for complex multi-step flows that would benefit from a dedicated page, or for marketing messages that interrupt users who have not requested them.
What are the accessibility requirements for modals?
Accessible modals require focus to move into the modal when it opens and be trapped within it while it is open, preventing keyboard users from interacting with the background. The modal must have a descriptive label via aria-labelledby and an accessible close mechanism. When the modal closes, focus must return to the element that triggered it. Background content should be marked as inert to prevent screen readers from accessing it while the modal is open. These requirements align with the WCAG dialog pattern and are essential for users who rely on keyboard navigation or screen readers. For detailed implementation guidance see the accessible modals and dialogs guide.
What is the difference between a modal and a dialog?
In common usage the terms are often interchangeable. Technically, a modal is any interface element that blocks interaction with the rest of the page until dismissed. A dialog is a specific type of overlay that prompts the user for information or a decision. All modals block background interaction, but not all dialogs are strictly modal. A non-modal dialog, sometimes called a modeless dialog, can appear without blocking the underlying page, though this pattern is less common in web interfaces.