alertdialog

Роль окна alertdialog нужна для диалогового окна с важной информацией. Обычно это модальные диалоговые оповещения. Они прерывают действия пользователей и показывают важные сообщения, которые можно принять или отклонить. Например, согласен ли пользователь удалить данные или подтверждение о переводе денег.

Диалоговое окно со срочным сообщением:

        
          
          <dialog  role="alertdialog"  aria-labelledby="label"  aria-describedby="description"  id="my-dialog"  onclick="window['my-dialog'].showModal()">  <h3 id="label">Ошибка оформления заказа</h3>  <p id="description">    Мы не смогли обработать заказ. Пожалуйста, проверьте    ваши данные и убедитесь, что на счёте достаточно денег.  </p>  <form method="dialog">    <button>Понятно</button>  </form></dialog>
          <dialog
  role="alertdialog"
  aria-labelledby="label"
  aria-describedby="description"
  id="my-dialog"
  onclick="window['my-dialog'].showModal()"
>
  <h3 id="label">Ошибка оформления заказа</h3>
  <p id="description">
    Мы не смогли обработать заказ. Пожалуйста, проверьте
    ваши данные и убедитесь, что на счёте достаточно денег.
  </p>
  <form method="dialog">
    <button>Понятно</button>
  </form>
</dialog>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Скринридеры прочитают демку примерно так: «Ошибка оформления заказа, диалог. Пожалуйста, проверьте ваши данные и убедитесь, что на счёте достаточно денег. Понятно, кнопка».

Добавьте к тегу role="alertdialog", лучше к <div> или <dialog>. Благодаря этой роли пользователи вспомогательных технологий поймут, что содержимое такого элемента отделено от остального содержимого страницы.

Сделайте диалоговое окно со срочным сообщением модальным с помощью aria-modal. Так пользователи поймут, что пока окно открыто, они не могут взаимодействовать с остальным содержимым.

Добавьте внутрь окна хотя бы один элемент, на который можно сделать фокус. Обычно это кнопка с текстом «Хорошо» или «Принять». При открытии окна фокус должен быть на этом элементе.

Чтобы диалоговое окно стало доступным, нужно ещё:

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

Добавить подпись для диалогового окна можно с помощью aria-labelledby, когда в окне есть видимый заголовок, или aria-label, если видимого заголовка нет. Используйте для тега с подписью id с таким же значением, как у aria-labelledby. Это свяжет диалоговое окно с заголовком.

У диалогового окна может быть и его расширенное описание. В этом случае используйте aria-describedby.

Если использовать HTML-тег <dialog>, не придётся делать большинство из этих шагов.

Пример модального окна с важным сообщением из Руководства по авторским ARIA-практикам (APG).

Когда пользователь открывает диалоговое окно, в фокусе может оказаться:

• первый интерактивный элемент;
• кнопка для закрытия окна с текстом «Закрыть», «Нет» и другими вариантами названий;
• первый параграф, если в окне большой текст.

Когда пользователь закрывает окно, верните фокус на кнопку, которая его открыла. Если кнопка исчезает, установите фокус на следующем элементе после неё.

Дополнительно диалоговые окна должны закрываться при нажатии на Esc. Также хорошая практика поддерживать закрытие окна по клику на странице вне его области.

alertdialog объединяет роли alert и dialog. Это тип диалогового сообщения, которое рассказывает о чём-то важном как alert, но при этом требует ответа пользователя.

Если у важного сообщения или предупреждения нет интерактивных элементов и это простой текст, используйте роль alert или aria-live="assertive". Такие сообщения встречаются в интерфейсах чаще, чем диалоговые окна со срочными сообщениями.