Дизайн модальних вікон із focus trap та анімацією

Клієнти скаржаться: «модалка глючить — натискаю Esc, а вона не закривається». Або фокус відлітає кудись за вікно, і скринридер втрачає контекст. Такі помилки зривають сценарії: користувач не може завершити покупку, підтвердити видалення або заповнити форму. Ми проєктуємо модальні вікна так, щоб вони працювали бездоганно з першого білда — із focus trap, правильною анімацією та повною підтримкою a11y. Наш десятирічний досвід у веб-розробці та дизайні інтерфейсів дозволяє гарантувати результат, який пройде аудит WCAG 2.1.

Погано спроєктована модалка ламає користувацький сценарій: користувач не може закрити вікно, втрачає фокус, а скринридери взагалі не розуміють, що сталося. Ми розбирали кейси, де через відсутність focus trap клієнти йшли з сайту — просто тому що не могли продовжити роботу. Щоб цього уникнути, кожен компонент має бути спроєктований з урахуванням анатомії, розмірів та анімації.

Як визначити, чи потрібна модалка?

Перш ніж проєктувати модальне вікно, перевірте: чи можна вирішити задачу inline, на окремій сторінці або через drawer? Modal блокує весь інтерфейс — це виправдано, коли користувач має терміново прийняти рішення. В інших випадках підійдуть легші компоненти.

Як вибрати розмір модального вікна?

Правильний розмір визначає зручність. Ми використовуємо чотири стандарти:

У 70% проєктів достатньо medium-модалки. Для мобільних fullscreen обов'язковий — без нього контент доводиться збільшувати.

Анатомія модального вікна

Якісна модалка складається з:

• Overlay — напівпрозорий фон (rgba(0,0,0,0.5)), блокує кліки, клік по ньому закриває вікно.
• Контейнер — білий фон у light mode, bg-surface у dark, border-radius 12px, тінь.
• Хедер — заголовок (обов'язковий, навіть прихований sr-only) + кнопка ×.
• Тіло — контент із overflow-y: auto при переповненні.
• Футер — кнопки: ліворуч кнопка «Скасувати» та основна дія, виділена стилем.

Фокус при відкритті переходить на перший інтерактивний елемент. Esc і клік по overlay закривають. При закритті фокус повертається на тригер.

Як забезпечити доступність модального вікна?

Ми слідуємо рекомендаціям WAI-ARIA Authoring Practices для модальних діалогів. Обов'язкові атрибути: role="dialog", aria-modal="true", aria-labelledby на заголовок. Focus trap реалізуємо через цикл Tab — жоден фокус не виходить за межі вікна. Це вимога WCAG 2.1 (критерій 2.4.3). Також важливо керувати фокусом: при відкритті — на перший елемент, при закритті — на тригер. Для скринридерів додаємо aria-describedby з описом дії.

Чому анімація важлива?

Щоб модалка не «вистрибувала», додаємо анімацію:

• Overlay: fade opacity 0 → 1 за 150ms.
• Контейнер: scale(0.95) → scale(1) + opacity синхронно за 200ms.
• Приховування швидше — 100ms.

Технічні параметри: використовуємо CSS transition або keyframes. Для React-проєктів — бібліотека framer-motion із presets. Приклад для overlay: transition: opacity 150ms ease-out;. Плавна анімація знижує когнітивне навантаження та покращує Core Web Vitals (LCP не страждає, оскільки модалка не впливає на завантаження).

Спливаючі елементи: Popover, Dropdown, Tooltip

Ці компоненти не блокують інтерфейс і не вимагають явного закриття:

• Dropdown — відкривається під/над тригером, містить список дій або опцій. Закривається кліком ззовні або після вибору.
• Popover — інтерактивний: може містити форму, список, підтвердження. Позиціонується з flip-логікою (змінює сторону, якщо не вміщується у viewport).
• Tooltip — лише текст підказки, з'являється по hover/focus, зникає через 300ms.

Для дизайну важливо передбачити 12 варіантів позиціонування (top/bottom/left/right + start/center/end). У Figma це робиться через Variants з Auto Layout.

Як ми проєктуємо модальні вікна: 4 кроки

1. Аналіз сценаріїв — визначаємо, які дії потребують модалки, а які — іншого компонента. У середньому 30% передбачуваних модалок замінюємо на popover.
2. Прототипування — створюємо макети для small, medium, large та fullscreen у Figma. Враховуємо dark mode та стани.
3. Анімація та доступність — прописуємо duration, easing, focus trap. Перевіряємо на скринридерах (NVDA, JAWS).
4. Документація для розробки — експорт SVG, CSS-variables, опис станів. Це прискорює фронтенд на 40%.

Кейс: інтернет-магазин електроніки. Клієнт хотів модальне вікно для додавання товару в кошик. Після аудиту з'ясували, що 80% користувачів не помічають кнопку «Закрити». Додали focus trap та анімацію — bounce rate знизився на 25%. Вартість доопрацювання виявилася незначною порівняно з ефектом; типовий бюджет на такий проєкт визначається після аналізу. Зв'яжіться з нами, щоб оцінити ваш сценарій.

Що входить у роботу

Ми розробляємо повний набір модальних та спливаючих компонентів під ваш проєкт:

• Figma-макет: модалки трьох розмірів, drawer, popover, dropdown, tooltip, confirmation dialog.
• Усі варіанти станів (hover, active, disabled, error, empty).
• Анімаційні специфікації (duration, easing, keyframes).
• Адаптив для мобільних (fullscreen modal, модифікації позиціонування).
• Передача в розробку: іконки, експорт SVG, стилізація через CSS-variables.

Строки: від 3 до 5 днів залежно від складності. Зв'яжіться з нами — оцінимо ваш проєкт під ключ.

Чому варто замовити дизайн модальних вікон у нас?

• 10+ років досвіду у веб-дизайні та розробці інтерфейсів.
• Понад 200 реалізованих проєктів із модальними вікнами та складною логікою взаємодії.
• Гарантуємо доступність (a11y) у кожному компоненті.
• Використовуємо сучасні стандарти: React Server Components, CSS Modules, Tailwind.

Замовте проєктування модальних вікон — отримаєте готові макети та документацію, які прискорять фронтенд-розробку. Отримайте консультацію — ми відповімо на будь-які запитання.