SSMW - Single Standard for Modal Windows

Definitions

The SSMW standard defines requirements for the semantics, accessibility, and logic of modal windows.

Positioning and scrolling:

• For Safari, use overscroll-behavior-y: none; to prevent “rubber band” scrolling;

• When the keyboard is open on mobile devices, the window is aligned to the top edge so that the input field remains visible.

Structure and Semantics

<dialog> is the preferred element for modal windows.

• Provides built-in support for aria-modal="true", which improves accessibility.

CSS Positioning:

• If <dialog> is rendered inside a container other than body, position: static is set to prevent the inheritance of conflicting properties;

• Standard absolute or fixed positioning is used for overlays at the document root.

Optimization:

• The modal element should only be added to the DOM when the modal is invoked;

• To prevent interface misalignment when scrolling on the main page is blocked, scrollbar-gutter: stable; is recommended on the HTML element.

Accessibility

Focus and Navigation:

• The modal window should manage focus locally;

• The user can navigate between interactive elements using Tab without leaving the modal.

Form inside the modal:

• Automatic focus on the first input field after opening the window speeds up data entry.

Nested modals:

• When multiple layers are present, z-index and focus must be managed correctly;

• Scroll locking and focus logic apply only to the topmost active layer.

Interactivity and Visual Feedback

Closing and Control:

• The modal window must respond correctly to all three standard closing methods: Esc, the “Close” button, and clicks on the backdrop.

Forms and Completion Scenarios:

• After the form is successfully submitted, the modal closes, giving way to a brief success message.

  This completion scenario ensures a predictable and pleasant user experience.

Animations:

• It is recommended to implement the modal’s entry and exit using CSS classes with smooth transitions.

  This adds a sense of completeness and visual smoothness to the interface.

Padding and Responsiveness:

• Internal padding prevents the modal from sticking to the screen edges;
• Vertical scrolling should be comfortable on small viewport.