alertdialog

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

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

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

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

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

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

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

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

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

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

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

        
          
          <div  role="alertdialog"  aria-labelledby="label">  <h3 id="label">Ошибка оформления заказа</h3>  <!-- Остальное содержимое окна--></div>
          <div
  role="alertdialog"
  aria-labelledby="label"
>
  <h3 id="label">Ошибка оформления заказа</h3>
  <!-- Остальное содержимое окна-->
</div>

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

        
          
          <div  role="alertdialog"  aria-label="Ошибка оформления заказа">  <!-- Остальное содержимое окна--></div>
          <div
  role="alertdialog"
  aria-label="Ошибка оформления заказа"
>
  <!-- Остальное содержимое окна-->
</div>

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

У диалогового окна может быть дополнительное описание. Оно пригодится в окнах с названиями, которые не до конца раскрывают их содержимое. Описания связывают через aria-describedby.

        
          
          <div  role="alertdialog"  aria-labelledby="label"  aria-describedby="description">  <h3 id="label">Эй, осторожнее там!</h3>  <p id="description">    Вы пытаетесь удалить свой аккаунт    из нашей замечательной соцсети. Уверены?  </p>  <button>Отменить удаление</button></div>
          <div
  role="alertdialog"
  aria-labelledby="label"
  aria-describedby="description"
>
  <h3 id="label">Эй, осторожнее там!</h3>
  <p id="description">
    Вы пытаетесь удалить свой аккаунт
    из нашей замечательной соцсети. Уверены?
  </p>
  <button>Отменить удаление</button>
</div>

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

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

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

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

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

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

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

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

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