Modal

A modal window is an overlay that displays content in front of the main page, requiring user interaction before returning to the main interface.

Examples

Focused Interaction: When you need the user’s undivided attention to complete a task or make a decision.
Form Submission: For forms that require user input without navigating away from the current page.
Confirmations: To confirm critical actions, such as deletions or submissions, ensuring the user acknowledges the action.
Additional Information: To provide detailed information or media without disrupting the main content flow.

Non-critical Information: Avoid using modals for information that is not crucial, as it can interrupt the user experience.
Complex Workflows: For complex or lengthy workflows, modals can be restrictive and cumbersome.
Frequent Interactions: If the interaction is required frequently, modals can become annoying and disruptive to the user.
Content Navigation: When users need to navigate or compare different sections, modals can limit their ability to do so efficiently.

Inline Expansion: Use expandable sections or accordions to show additional content within the main page layout.
Tooltips: For brief information or tips, tooltips can be less intrusive than modals.
Side Panels: Slide-out panels can be a less disruptive way to display additional content while keeping the main page accessible.

Focus Management: Ensure that the focus is trapped within the modal while it’s open and returns to the triggering element once closed.
Keyboard Navigation: Modals must be fully navigable via keyboard, with logical tab order and clear focus indicators.
Screen Reader Announcements: Use ARIA roles and properties (e.g., role="dialog", aria-labelledby, aria-describedby) to inform screen readers of the modal’s presence and purpose.
Close Options: Provide multiple ways to close the modal (e.g., an "X" button, a close button, and pressing the "Esc" key).
Contrast and Readability: Ensure high contrast between the modal and the background, and use readable font sizes and styles.
Responsive Design: Modals should be responsive and accessible on all device sizes, ensuring content is not cut off or hidden on smaller screens.