Доступность модальных окон
Делаем модальные окна (попапы, диалоги) доступными: фокус удерживается внутри окна, скринридер объявляет его открытие, Esc закрывает, после закрытия фокус возвращается на место, фон не «прокликивается». Чтобы попапы не были ловушкой для пользователей клавиатуры и скринридера. Честно сразу: это опирается на управление фокусом (807) и ARIA (808) — связанные вещи; и некоторые сторонние готовые модалки придётся дорабатывать или заменять, гарантировать поведение чужого виджета нельзя.
Доступность модальных окон — что это и зачем
Доступность модальных окон — это приведение попапов и диалогов к доступному поведению: правильная роль (dialog) и связанные заголовок/описание для скринридера, удержание фокуса внутри окна, пока оно открыто (focus trap), перенос фокуса в окно при открытии и объявление его скринридеру, закрытие по Esc и по кнопке, ВОЗВРАТ фокуса на исходный элемент после закрытия, «инертный» фон (его нельзя случайно прокликать/протабать под окном). Честно про связку, это важно: доступная модалка опирается на управление фокусом (807) и корректную ARIA (808) — это связанные вещи, часто идут в комплексе. Эта услуга применяет их к конкретному типу компонента — модальным окнам. Честно про сторонние модалки: если у вас попапы на готовом стороннем плагине, его доступность может быть неполной — придётся дорабатывать или заменять доступным решением; гарантировать поведение чужого готового виджета «как есть» нельзя, честно отметим такие места. Честно про охват: доступные модалки — важная зона (попапы часто ломают доступность), но не вся доступность сайта. Честно про процесс: новые попапы нужно делать доступными сразу — иначе проблема вернётся. Честно про эффект: пользователи клавиатуры/скринридера не застревают в попапах; прямой рост продаж не гарантируем. Честно про доступ: нужен доступ к коду. Важная граница: это модалки; общее управление фокусом — 807, ARIA — 808, клавиатура — 806. Представьте: вместо «попап открылся, а фокус остался на фоне, выйти клавишами нельзя» — корректный доступный диалог. Базовая цена — от 15 000 ₽ (зависит от числа и сложности модалок).
Какие задачи решаем
- Попап открылся, а фокус остался на фоне — выйти клавишами нельзя.
- Скринридер не объявляет открытие окна — незрячий не понял.
- Esc не закрывает, фокус не возвращается на место.
- Фон под окном прокликивается/протабывается.
Что входит в услугу «Доступность модальных окон»
- Корректная роль dialog и связанные заголовок/описание
- Удержание фокуса в окне (focus trap)
- Перенос фокуса в окно и объявление скринридеру
- Закрытие по Esc и кнопке, возврат фокуса после закрытия
- «Инертный» фон под открытым окном
- Доработка/замена недоступных сторонних модалок
- Указание границ (опора на 807/808; чужие виджеты)
- Передача и разбор с вами
Что вы получите в результате
- Фокус удерживается в окне и возвращается на место
- Скринридер объявляет открытие диалога
- Esc и кнопка закрывают, фон не мешает
- Доступные модалки (в связке с 807/808)
Как проходит работа: этапы
- Находим модалки и проверяем их поведение с клавиатуры/скринридера; собираем доступ
- Настраиваем роль, focus trap, объявления, Esc, возврат, инертный фон
- Дорабатываем/заменяем недоступные виджеты, разбираем с вами
Почему LUA·SCRIPT
- Фиксированная цена и сроки — без сюрпризов в счёте.
- Отчёт и рекомендации простым языком — понятно без технического бэкграунда.
- На связи на каждом этапе и отвечаем на вопросы по результату.
Частые вопросы
Чем это отличается от управления фокусом?
Управление фокусом (807) — общая механика фокуса по сайту. Эта услуга применяет её (плюс ARIA 808) конкретно к модальным окнам: роль dialog, удержание фокуса, объявление, Esc, возврат, инертный фон. Часто делаем в комплексе; честно подскажем, нужно ли отдельно модалки или шире.
У нас попапы на готовом плагине — заработает?
Зависит от плагина. Часть сторонних модалок доступна неполно (нет focus trap, не объявляется, фон прокликивается). Где можно — дорабатываем, где нет — предложим заменить доступным решением. Гарантировать поведение чужого готового виджета «как есть» честно нельзя; такие места отметим.
Это разовая работа?
Базово да, но новые попапы нужно делать доступными сразу, иначе проблема вернётся (новый недоступный диалог = новая ловушка). Дадим рекомендации, чтобы будущие модалки сразу строились доступно. Доступность — процесс, а не разовая точка.
Об исполнителе
«Доступность модальных окон» — услуга каталога LUA·SCRIPT по направлению «Качество сайта». Работаем по договору, итог оформляем отчётом с понятными рекомендациями.