アラートダイアログ
Alert dialog
別名: 確認ダイアログ、警告ダイアログ、削除確認ダイアログ、Alert dialog、Confirm dialog
生態(さわってみる)
一言定義
破壊的操作の確認や警告など、ユーザーの選択を必須にする最小構成の前面ダイアログ。
分類
使う場面
- 削除など元に戻せない操作の前に、実行するかどうかの意思確認を必須にしたいとき
- 選択肢をボタンのみに絞った、シンプルな警告を出したいとき
避ける場面
- フォーム入力など、確認以外の作業を伴うとき(→モーダル)
- 応答を必須にせず、結果だけ伝えれば足りるとき(→トースト)
近縁種との比較
モーダルとは同じ「背面操作を止める前面ウィンドウ」でも役割が異なり、モーダルはフォーム入力など何らかの作業を載せる汎用の場であるのに対し、アラートダイアログは確認・警告に用途を絞った最小構成のダイアログで、選択肢は原則ボタンのみに限られる。role=“alertdialog”は通常のrole=“dialog”よりも緊急度が高いことを示すため、開いた瞬間にフォーカスを安全な選択肢(キャンセル等)へ移す実装が重要になる。単なる結果通知で応答を必要としないなら、応答を強制しない軽量なトーストを使う。
実例リンク
アクセシビリティ
- role
- role="alertdialog"(ネイティブ<dialog>にrole="alertdialog"を明示的に付与する)。見出しはaria-labelledby、警告文はaria-describedbyで紐付ける
- キーボード操作
- 開いた瞬間にフォーカスを既定で安全な選択肢(多くはキャンセル)に移す。Escキーはキャンセルと同じ意味で閉じる
- 補足
- モーダルより選択肢を絞り、原則としてボタン以外の入力要素を持たない。破壊的操作の確定ボタンは視覚的に警告色にしつつ、既定フォーカスにはしない(誤操作の防止)