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