Иногда требуется показать пользователю уведомление: об успешной отправке формы, об ошибке или о чём-либо ещё. Доступные уведомления соответствуют нескольким простым критериям.
Уведомление не должно блокировать доступ к основному содержимому без крайней необходимости. Всех раздражают всплывающие окна, блокирующие страницу.
Уведомление не должно автоматически скрываться по истечении двух, трёх или десяти секунд. Пользователь в любой момент может отвлечься на чай/звонок/пожар и потерять контекст, в котором он только что использовал ваш сайт или приложение. Позвольте пользователю решать самому, когда закрыть уведомление — предусмотрите для этого отдельную кнопку.
Автоматическое скрытие уведомлений по таймеру нарушает пункт 2.2.3 WCAG.
Ассистивные технологии вроде электронных читалок отслеживают изменение содержимого элементов с role="alert". При изменениях они немедленно озвучивают новое содержимое, даже если они в этот момент озвучивали другую часть страницы.
Контейнер с role="alert" должен быть статичным. Уведомление должно встраиваться в контейнер непосредственно в момент показа, иначе ассистивные технологии не смогут отследить его появление. На каждое уведомление нужен отдельный контейнер с role="alert", потому что читалки озвучивают всё содержимое контейнера при изменении любой его части.
Материал для углубления в тему:
- Alerts! A11ycasts #10
- Роль
alertв спецификации WAI-ARIA 1.1 - Роль
alertdialogв спецификации WAI-ARIA 1.1 (для уведомлений, блокирующих работу со страницей)