SSMW - Single Standard for Modal Windows

Definitions

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

Structure and Semantics

<dialog> is the preferred element for modal windows, as it provides built-in support for aria-modal="true", which improves accessibility.

If <dialog> is rendered inside a container other than the 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, for Safari and Edge, overscroll-behavior-block: none; must be used to prevent “rubberband” scrolling, and on mobile devices with the keyboard open, align the window to the top edge so that the input field remains in view.

The modal window should be added to the DOM only when the window is invoked, and to prevent interface misalignment when scrolling on the main page is blocked, it is recommended to set scrollbar-gutter: stable; on the html element.

Accessibility

A modal window should manage focus locally so that the user can navigate between interactive elements using the Tab key without leaving the modal. If there are multiple layers, the z-index and focus must be managed correctly, and only the topmost active layer should have scrolling disabled and focus set.

Automatically focusing on the first <input> after the window opens speeds up data entry.

Interactivity and Visual Feedback

The modal window should respond correctly to all three standard closing methods: Esc, the Close button, and a click on the backdrop. After the form is successfully submitted, the modal closes, giving way to a brief message confirming the successful request, this closing scenario ensures a predictable and pleasant user experience.

It is recommended to implement the modal’s appearance and disappearance using CSS classes with smooth transitions, this will give the interface a sense of completeness and visual smoothness. It is also best to add internal padding to prevent the modal from sticking to the screen edges. Additionally, keep in mind that the modal may extend beyond the viewport, so you’ll need to provide for internal scrolling.