Что такое доступное модальное окно и зачем оно нужно
Модальное окно — это элемент пользовательского интерфейса, который появляется поверх основного контента и требует действий от пользователя. Часто используется для подтверждений, форм, предупреждений. Однако если модальное окно реализовано без учёта доступности, оно становится барьером: люди, использующие клавиатуру или скринридеры, не смогут с ним взаимодействовать.
Создание доступного модального окна (accessible modal) означает, что оно должно быть удобно для всех — включая пользователей с ограничениями зрения, моторики и когнитивных функций. Это не только вопрос этики, но и соответствие стандартам WCAG (Web Content Accessibility Guidelines).
Почему важен фокус и клавиша Esc
После открытия модального окна, фокус ввода должен автоматически перемещаться внутрь него. Это принцип «ловушки фокуса»: пользователь не должен случайно «выходить» за пределы модалки при навигации с клавиатуры. Это и есть модальное окно с фокусом.
Закрытие модального окна по Esc — это стандартная практика, которой ожидают многие пользователи. Она не заменяет кнопку "Закрыть", но дополняет её, повышая удобство и предсказуемость поведения интерфейса.
Как работает ловушка фокуса — представим это визуально
Вообразим модальное окно как коробку. Внутри — кнопки, поля ввода, ссылки. Вне коробки — остальной сайт. Когда вы нажимаете Tab, курсор должен «ходить» по элементам только внутри коробки. Как только курсор доходит до последнего элемента, следующий Tab возвращает его к первому.
Это можно представить как круговую диаграмму с фокусом, замкнутым внутри модального окна. Если выход за пределы окна возможен, значит, ваша реализация нарушает accessibility best practices.
Код на практике: как реализовать доступное модальное окно
Вот простой пример на чистом JavaScript (без фреймворков):
```html
Подтвердите действие
Вы уверены, что хотите продолжить?
```
```javascript
const modal = document.getElementById('modal');
const focusableElements = 'button';
let firstFocusable, lastFocusable;
let previouslyFocused;
function openModal() {
previouslyFocused = document.activeElement;
modal.hidden = false;
const elements = modal.querySelectorAll(focusableElements);
firstFocusable = elements[0];
lastFocusable = elements[elements.length - 1];
firstFocusable.focus();
document.addEventListener('keydown', trapFocus);
document.addEventListener('keydown', closeOnEsc);
}
function closeModal() {
modal.hidden = true;
document.removeEventListener('keydown', trapFocus);
document.removeEventListener('keydown', closeOnEsc);
previouslyFocused.focus();
}
function trapFocus(e) {
if (e.key !== 'Tab') return;
if (e.shiftKey) {
if (document.activeElement === firstFocusable) {
e.preventDefault();
lastFocusable.focus();
}
} else {
if (document.activeElement === lastFocusable) {
e.preventDefault();
firstFocusable.focus();
}
}
}
function closeOnEsc(e) {
if (e.key === 'Escape') {
closeModal();
}
}
```
Этот код демонстрирует, как реализовать модальное окно с фокусом и закрытием по Esc. При открытии фокус переходит внутрь, а при нажатии Escape окно закрывается, и фокус возвращается на предыдущий элемент.
Что ещё важно учесть
Чтобы ваше модальное окно действительно было доступным, стоит учесть следующие моменты:
- Используйте `aria-modal="true"` и `role="dialog"` — это помогает скринридерам понимать, что перед ними модальное окно.
- Добавьте `aria-labelledby` или `aria-label` для заголовка — это озвучивается скринридерами как заголовок окна.
- Отключайте взаимодействие с фоном, пока модалка открыта. Например, делайте основное содержимое inert (через атрибут или скрипт).
Модальные окна в современных UI-библиотеках
Если вы используете React, Vue или другие фреймворки, то наверняка сталкивались с готовыми решениями. Однако не все из них соответствуют стандартам доступности.
Сравним:
- React Modal — хорошая реализация, поддерживает фокус и закрытие по Esc.
- Bootstrap Modal — требует доработки: по умолчанию не всегда соблюдает ловушку фокуса.
- Собственные реализации — могут быть гибче, но требуют больше ответственности.
Таким образом, если вы стремитесь к созданию доступного модального окна, не полагайтесь слепо на библиотеки — проверяйте, как они справляются с фокусом, aria-атрибутами и поддержкой клавиатуры.
Проверка и тестирование
Чтобы убедиться, что ваше модальное окно соответствует accessibility best practices:
- Протестируйте работу только с клавиатурой (Tab, Shift+Tab, Enter, Escape).
- Используйте скринридер (например, NVDA или VoiceOver).
- Прогоните окно через Lighthouse или axe DevTools.
Напоследок — о будущем
Создание доступного модального окна — это не просто соблюдение стандартов, а вклад в более инклюзивный веб. Всё больше пользователей взаимодействует с контентом с помощью вспомогательных технологий, и ваша задача — сделать так, чтобы они чувствовали себя равными.
Если вы только начинаете погружение в эту тему, начните с малого: реализуйте ловушку фокуса и добавьте закрытие модального окна по Esc. Уже эти шаги сделают ваш интерфейс на порядок лучше.
