このワイヤーの特徴
ページを移らずに、申し込みを済ませられる
短い入力をモーダルの中で受け付け、読んでいたページから離れずに申し込めるようにしています。
開いたら、最初の入力欄に移る
モーダルを開いたら最初の入力欄を選んだ状態にし、すぐに入力を始められるようにしています。
誤りと完了を、モーダルの中で伝える
入力していない項目は、入力欄のすぐ下に文字で示し、最初の誤りの欄に移ります。
送信が終わったら、同じモーダルの中で受け付けたことを伝えます。
背景を押しても、閉じないようにする
入力の途中で背景を押して閉じると、入力した内容が消えてしまいます。
この型では背景を押しても閉じず、閉じるボタンとEscキーでだけ閉じます。
制作時のよくある失敗
背景を押しただけで、入力が消える
入力の途中で背景に触れて閉じ、書いた内容が消えると、読み手は申し込みをやめてしまいます。
入力のあるモーダルは、背景を押しても閉じないようにします。
項目が多すぎて、モーダルの中でスクロールが続く
項目が5つ、6つと増えると、モーダルの中で入力欄を探すことになります。
項目が多い場合は、問い合わせのページにします。
送信したあと、何も言わずに閉じる
送信と同時にモーダルが閉じると、読み手は送れたかどうか分かりません。
受け付けたことと、このあと何が起きるかを伝えてから閉じます。
誤りを、色だけで示す
入力欄の枠を赤くするだけでは、色の見え方によっては伝わりません。
誤りの内容を文字で書き、aria-invalid と aria-describedby で入力欄と結び付けます。
よくある質問
入力の途中で閉じたときは、確認を出したほうがよいですか?
まだ何も入力していなければ、Escキーや閉じるボタンでそのまま閉じて問題ありません。
入力の途中で閉じると内容が消える場合は、「入力した内容を破棄しますか？」と確認するか、閉じても入力を残しておく方法を検討します。
モーダルのフォームと、問い合わせのページは、どう使い分ければよいですか?
2〜3項目で済む申し込みならモーダル、相談の内容を書いてもらう場合や項目が多い場合はページが向くと考えられます。
送信が終わったあと、自動でモーダルを閉じてもよいですか?
受け付けたことを読む前に閉じると、送れたかどうか分からなくなります。
完了の文を表示し、閉じるボタンで閉じてもらう形が安心です。
モーダルは、dialog 要素で作ったほうがよいですか?
dialog 要素を showModal() で開くと、後ろのページを操作できない状態やEscキーで閉じる動きをブラウザが用意してくれます。
独自に作る場合は、role=dialog と aria-modal=true を付け、操作を閉じ込める処理と閉じたあとに元の場所へ戻す処理を自分で用意します。
