Диалоговые окна¶

Модальный диалог останавливает работу, пока пользователь не примет решение. Средство сильное, поэтому пользоваться им стоит, только когда без ответа дальше действительно никак: нужно подтвердить необратимое действие, выбрать вариант при конфликте или ввести данные, без которых операция не пройдёт. Сообщения о результате, предупреждения и подсказки лучше показывать прямо на странице или во всплывающем уведомлении, чтобы не выдёргивать человека из контекста.

Текст диалога¶

Заголовок диалога формулирует вопрос или ситуацию так, чтобы её можно было понять без чтения основного текста: «Удалить проект „Бюджет 2026“?», а не «Внимание» или «Подтверждение». Основной текст называет последствия и то, что нельзя будет вернуть, в одном-двух предложениях. Длинный текст в диалоге не читают, поэтому всё, что не влияет на решение, из него убирают.

Кнопки¶

Кнопки называют действие соответствующим глаголом, а не отвечают «Да» или «Нет» на вопрос заголовка. Если пользователь пропустил текст, то надпись «Удалить» подсказывает ему, что произойдёт, а «Да» - ничего не объясняет.

Действие, которое закрывает диалог без изменений, называется «Отмена» и всегда закрывает диалог без последствий.

Если у диалога три исхода, как при закрытии документа с несохранёнными изменениями, каждая кнопка описывает свой исход: «Сохранить», «Не сохранять», «Отмена».

Расположение кнопок зависит от платформы. Для веба нет единого стандарта. В macOS и iOS главное действие обычно находится справа, а в Windows кнопка подтверждения традиционно стоит левее кнопки «Отмена». Material Design выравнивает действия по правому краю и размещает подтверждающее действие последним.

Для веб-продукта выберите один порядок и придерживайтесь его во всех диалогах. В нативных приложениях следуйте соглашениям платформы, так как пользователи переносят свои привычки из системных диалогов.

Фокус и клавиатура¶

При открытии диалога фокус автоматически переходит на первый интерактивный элемент или на безопасное действие в диалоговых окнах подтверждения разрушительных операций. Если важно прочитать текст до выбора, фокус направляется на заголовок. Пока диалог открыт, фокус остаётся внутри него, и содержимое страницы под диалогом недоступно для взаимодействия. При закрытии диалога фокус возвращается к элементу, который его открыл, иначе пользователь клавиатуры теряет своё место на странице.

Клавиша Esc закрывает диалог так же, как «Отмена». Нативный элемент <dialog>, открытый методом showModal(), обеспечивает изоляцию фона и закрытие по Esc без дополнительного кода; подробная модель поведения описана в паттерне Dialog (Modal) руководства WAI-ARIA Authoring Practices.

Требование не создавать ловушек для фокуса (2.1.2 No Keyboard Trap, A) не противоречит удержанию фокуса в модальном диалоге, поскольку из диалога всегда есть выход стандартными средствами клавиатуры.

Готовые тексты¶

Тексты типовых диалогов на русском и английском языках с рекомендациями по кнопкам собраны в разделе Типовые диалоги и сообщения.