アラートダイアログ

Alert dialog

別名: 確認ダイアログ、警告ダイアログ、削除確認ダイアログ、Alert dialog、Confirm dialog

生態(さわってみる)

アカウントを削除しますか?

この操作は取り消せません。すべてのデータが完全に削除されます。

一言定義

破壊的操作の確認や警告など、ユーザーの選択を必須にする最小構成の前面ダイアログ。

分類

使う場面

  • 削除など元に戻せない操作の前に、実行するかどうかの意思確認を必須にしたいとき
  • 選択肢をボタンのみに絞った、シンプルな警告を出したいとき

避ける場面

  • フォーム入力など、確認以外の作業を伴うとき(→モーダル)
  • 応答を必須にせず、結果だけ伝えれば足りるとき(→トースト)

近縁種との比較

モーダルとは同じ「背面操作を止める前面ウィンドウ」でも役割が異なり、モーダルはフォーム入力など何らかの作業を載せる汎用の場であるのに対し、アラートダイアログは確認・警告に用途を絞った最小構成のダイアログで、選択肢は原則ボタンのみに限られる。role=“alertdialog”は通常のrole=“dialog”よりも緊急度が高いことを示すため、開いた瞬間にフォーカスを安全な選択肢(キャンセル等)へ移す実装が重要になる。単なる結果通知で応答を必要としないなら、応答を強制しない軽量なトーストを使う。

実例リンク

アクセシビリティ

role
role="alertdialog"(ネイティブ<dialog>にrole="alertdialog"を明示的に付与する)。見出しはaria-labelledby、警告文はaria-describedbyで紐付ける
キーボード操作
開いた瞬間にフォーカスを既定で安全な選択肢(多くはキャンセル)に移す。Escキーはキャンセルと同じ意味で閉じる
補足
モーダルより選択肢を絞り、原則としてボタン以外の入力要素を持たない。破壊的操作の確定ボタンは視覚的に警告色にしつつ、既定フォーカスにはしない(誤操作の防止)