Начало распродаж · Скидка на доставку · Поступление новой коллекции

BELAYA KASKA / FEATURE

designАвтор: Пуск‑Медиа (импорт)Просмотры: 3

Порядок фокуса и модальные окна: ловушка таба и возврат на триггер

WCAG 2.4.3 и практика: куда уходит фокус при открытии диалога, как закрыть клавиатурой и не потерять пользователя в оверлее.

Изображение статьи: Порядок фокуса и модальные окна: ловушка таба и возврат на триггер

Фокус должен переходить внутрь модального окна при открытии и возвращаться на элемент, который его вызвал, при закрытии — иначе пользователи клавиатуры «выпадают» в фон страницы.

Пока диалог открыт, таб не должен уводить фокус под оверлей: используйте inert на корне или портал с aria-modal.

- [Understanding Focus Order — WCAG 2.2](https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html) — Критерий 2.4.3 и заметки.

- [WAI-ARIA Authoring Practices: Dialog Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) — Рекомендуемая клавиатурная модель.

---

## Проверка перед релизом

Пройдите сценарий только с Tab/Shift+Tab и Esc; затем с NVDA/VoiceOver — объявляется ли роль dialog и заголовок.

Не полагайтесь на outline: none без заметной замены — это бьёт по 2.4.7 Focus Visible.

#доступность#WCAG#модалки

Мы используем обязательные cookie для работы сайта (корзина, вход, оформление заказа) и необязательные — для аналитики и маркетинга. Вы можете принять все, отклонить необязательные или настроить категории. Подробнее в политике cookies.