Alert

Подписи

Заголовок и текст алерта должны быть понятны без опоры только на иконку или цвет.

Поведение клавиатуры

• Статичному алерту обычно не нужен фокус.
• Интерактивные элементы внутри алерта должны оставаться доступными с клавиатуры по отдельности.

Поведение фокуса

• Фокус относится к элементам управления внутри алерта, а не к корню алерта.

Семантика для скринридеров

• Текст должен ясно передавать сообщение без помощи цвета.
• Иерархия заголовка и текста должна оставаться осмысленной, даже если иконка игнорируется.
• По умолчанию у Alert нет роли live-региона, потому что variant описывает внешний вид, а не срочность сообщения.
• Алерт, который появляется после действия пользователя и требует немедленного внимания, получает role='alert'. Скринридеры озвучивают его сразу после рендера.
• Несрочный результат действия помещайте в постоянно смонтированный контейнер с role='status' и рендерите алерт внутри него. Вежливый live-регион, добавленный одновременно со своим текстом, часто не озвучивается.
• Статичный алерт, который присутствует на странице с самого начала, не получает роли, чтобы не прерывать пользователя при каждой загрузке страницы.

Семантика форм

• Алерты — это поверхности обратной связи, а не элементы управления формы.
• Используйте алерты, чтобы объяснить состояние формы, но не для полной замены валидации на уровне полей.

Риски доступности

• Добавление role='alert' статичным алертам, из-за чего пользователей скринридеров прерывают при загрузке страницы.
• Передача серьёзности только цветом.
• Расплывчатые заголовки вроде «Внимание» без содержательного текста.
• Слишком много действий в небольшой поверхности обратной связи.