Модальное окно или диалог: как выбрать и не сломать доступность
Проектируете модальные окна? А знаете, чем они принципиально отличаются от не-модальных диалогов? 🤔
Это не просто вопрос терминологии. Неверный выбор типа компонента ломает сценарии для клавиатурных пользователей и людей со скринридерами. А неправильная реализация даже правильного выбора делает интерфейс недоступным.
В новом материале разобрали тему от и до:
✅ Алгоритм выбора: три вопроса, которые переводят проектное решение из разряда «по ощущениям» в разряд обоснованных критериев.
✅ Техническая реализация: что нативный <dialog> делает за вас, а за что всё ещё отвечаете вы (спойлер: возврат фокуса — за вами).
✅ Стилизация и анимация: важное ограничение transition и как его обойти.
✅ Чек-лист доступности: 20+ пунктов для проверки перед релизом.
Бонус: Разбор вложенных модалок, работы с кастомными контролами и обработки длинного контента.
#a11y #Frontend #CSS #HTML #JavaScript
