このワイヤーの特徴
何が起きるかを、題名と本文で伝える
題名を「この予約を取り消しますか？」のような問いかけにし、本文で対象の予約と、元に戻せないことを書いています。
「よろしいですか？」だけでは、何を確認しているのかが伝わりません。
ボタンの名前を、動作で書く
ボタンは「OK」「キャンセル」ではなく、「予約を取り消す」「予約を残す」と動作で書いています。
ボタンの名前だけを読んでも、押した結果が分かります。
最初の選択を、安全な方に置く
開いたときは「予約を残す」を選んだ状態にし、Enterキーを続けて押しても取り消されないようにしています。
元に戻せない操作は、読み手が選び直したときだけ実行します。
確認の役割を、読み上げでも伝える
この例は元に戻せない操作なので role=”alertdialog” で組み、題名と本文を aria-labelledby・aria-describedby で結び付けています。
alertdialog は、すぐに注意と応答を求める重要な確認に使う役割です。
通常の確認なら role=”dialog” でも組めます。
背景を押しても閉じないようにし、Escキーでは「残す」側として閉じます。
制作時のよくある失敗
「よろしいですか？」「OK」だけにする
何を確認しているのか、OKで何が起きるのかが分からないと、読み手は内容を確かめずに押します。
題名・本文・ボタンのそれぞれで、対象と結果を具体的に書きます。
実行するボタンを、最初から選んだ状態にする
開いた瞬間に実行するボタンが選ばれていると、Enterキーを続けて押しただけで実行されます。
最初は取り消しや戻る側を選んだ状態にします。
どんな操作にも確認を出す
保存や移動のたびに確認が出ると、読み手は読まずに押す癖がつき、本当に大切な確認も読まれなくなります。
確認は、元に戻せない操作に絞ります。
背景を押したら、実行されたように見える
背景を押して閉じたときに、実行されたのか取り消されたのかが分からないと、読み手は不安になります。
確認の画面は、ボタンでだけ閉じるか、閉じたら何もしなかったことを伝えます。
よくある質問
確認のダイアログと、元に戻すボタンは、どう使い分ければよいですか?
あとから元に戻せる操作なら、実行したあとに「元に戻す」を短く表示するほうが、操作の流れを止めずに済みます。
元に戻せない操作だけに、確認のダイアログを使うのが目安です。
実行するボタンは、赤くしたほうがよいですか?
色で危険さを伝える方法はありますが、色だけでは伝わらない人もいます。
ボタンの名前で結果を書き、色は補助として使います。
モーダルは、dialog 要素で作ったほうがよいですか?
dialog 要素を showModal() で開くと、後ろのページを操作できない状態やEscキーで閉じる動きをブラウザが用意してくれます。
独自に作る場合は、role=dialog と aria-modal=true を付け、操作を閉じ込める処理と閉じたあとに元の場所へ戻す処理を自分で用意します。
