SSMW - Единый стандарт для модальных окон

Определения

Стандарт SSMW определяет требования к семантике, доступности и логике работы модального окна.

Позиционирование и прокрутка:

• Для Safari необходимо использовать overscroll-behavior-y: none; для предотвращения «резинового» скролла;

• При открытой клавиатуре на мобильных устройствах окно выравнивается по верхнему краю, чтобы поле ввода оставалось в зоне видимости.

Структура и Семантика

<dialog> является предпочтительным элементом для модальных окон.

• Предоставляет встроенную поддержку aria-modal="true", что повышает доступность.

CSS-позиционирование:

• Если <dialog> рендерится внутри контейнера, отличного от body, задается position: static для предотвращения наследования конфликтующих свойств;

• В корне документа используется стандартное абсолютное или фиксированное позиционирование для оверлеев.

Оптимизация:

• Модальный элемент следует добавлять в DOM только при вызове окна;

• Для предотвращения смещения интерфейса при блокировке прокрутки основной страницы рекомендуется scrollbar-gutter: stable; на html.

Доступность

Фокус и навигация:

• Модальное окно должно управлять фокусом локально;

• Пользователь может перемещаться между интерактивными элементами с помощью Tab, не покидая модалку.

Форма внутри модалки:

• Автоматический фокус на первый инпут после открытия окна ускоряет ввод данных.

Вложенные модалки:

• При наличии нескольких слоев необходимо корректно управлять z-index и фокусом;

• Блокировка прокрутки и логика фокуса применяются только к верхнему активному слою.

Интерактивность и Визуальный отклик

Закрытие и контроль:

• Модальное окно должно корректно реагировать на все три привычных способа закрытия: Esc, кнопка «Закрыть», клики по backdrop.

Формы и сценарии завершения:

• После успешной отправки формы модалка закрывается, уступая место краткому сообщению об успехе.

  Такой сценарий завершения обеспечивает предсказуемый и приятный пользовательский опыт.

Анимации:

• Вход и выход модалки рекомендуется реализовывать через CSS-классы с плавными переходами.

  Это добавляет интерфейсу ощущение завершенности и визуальной мягкости.

Отступы и адаптивность:

• Внутренние паддинги предотвращают прилипание модалки к границам экрана;
• Вертикальная прокрутка должна быть комфортной на малых viewport.