ウェブサイト フォーム送信後の確認と完了 アクセシブル設計のポイント
フォーム送信後の「確認」と「完了」がもたらす利用者体験
ウェブサイトにおけるフォームの入力は、サービスの利用申し込み、お問い合わせ、商品の購入など、多くのユーザーにとって最終的な目的を達成するための重要なステップです。しかし、フォームの入力そのものだけでなく、その後の「確認画面」や「完了画面」のアクセシビリティも、ユーザーが安心して手続きを終えるために非常に重要です。
特に、視覚障害のある方、高齢者、認知に特性のある方、あるいは一時的な状況（例えば noisy な環境でスマートフォンを操作しているなど）にあるユーザーは、視覚的な情報だけでは手続きが正しく行われたか、次に何をすべきかを把握しにくい場合があります。アクセシブルな確認・完了画面は、これらのユーザーが迷うことなく、安心して次の行動に移ることを可能にします。
本記事では、ウェブサイトのフォーム送信後の確認画面と完了画面において、どのようなアクセシブル設計が重要となるのか、利用者の視点からそのポイントを解説いたします。
確認画面におけるアクセシブルな配慮
フォーム入力後に確認画面が表示される場合、ユーザーは自身の入力内容に誤りがないかを確認し、必要に応じて修正を行う機会を得ます。この確認プロセスを誰にとっても分かりやすくすることが重要です。
- 入力内容の明確な提示: 入力した項目と内容が明確に対応している必要があります。項目名は簡潔かつ分かりやすく表示し、入力内容は編集が可能であることを視覚的および構造的に示すべきです。例えば、各入力項目の隣に「修正」ボタンを配置し、そのボタンがどの項目に対応しているかを
aria-labelledbyなどで関連付けることが有効です。 - エラー表示との連携: 確認画面で入力エラーが検出された場合、どの項目がエラーであるか、そしてなぜエラーなのかを明確に伝える必要があります。エラーメッセージは項目の近くに表示し、エラーのある項目へのリンクや修正ボタンを配置することで、ユーザーが容易に修正箇所へ移動できるように配慮します。スクリーンリーダー利用者に対しては、エラーの存在とその内容をページ上部などでまとめて通知し、各エラー箇所へのリンクを提供することが推奨されます。
- 変更の容易さ: 確認画面から元の入力フォームに戻って内容を修正する際、入力した内容が保持されている必要があります。また、戻る操作が簡単に行えるように、「戻って修正する」のような明確なボタンを提供します。
完了画面におけるアクセシブルな配慮
フォーム送信が完了したことを明確に伝える完了画面は、ユーザーに安心感を与える上で不可欠です。完了したこと、そして次に取るべき行動を、誰にでも理解できるように設計します。
- 完了の明確な通知:
- 視覚: 「送信が完了しました」「お申し込みありがとうございます」といった明確な見出しやメッセージを、ページの目立つ位置に表示します。チェックマークなどの視覚的なシンボルも有効です。
- 音声（スクリーンリーダー）: ページが表示された際に、「完了しました」といった重要なメッセージがスクリーンリーダーによって自動的に読み上げられるように設定します。これは、WAI-ARIAの
aria-live="polite"などの属性をメッセージが表示される領域に設定することで実現可能です。ユーザーが何も操作しなくても、完了したことを知ることができます。 - ランドマーク・フォーカス管理: 完了メッセージの領域をランドマークとしてマークアップしたり、ページ遷移後すぐに完了メッセージの領域にフォーカスを移動させたりすることで、スクリーンリーダー利用者がその情報にすぐにたどり着けるようにします。
- 次に取るべき行動の明確化: 完了後、ユーザーが次に何をすべきか（例: 確認メールを確認する、マイページに進む、トップページに戻るなど）を具体的に示します。関連するリンクやボタンを分かりやすく配置し、その目的を明確に記述します。
- 重要な情報の提示: 注文番号や問い合わせ番号、受付日時、確認メールが送信された旨など、完了に関連する重要な情報は、目立つ位置に、コピーしやすい形式で提示します。これらの情報も、スクリーンリーダーで容易に読み上げられるように適切にマークアップします。
- 時間制限の排除: 完了画面に時間制限を設けることは、ユーザーが情報を十分に確認する妨げとなるため避けるべきです。
技術的な補足：aria-liveについて
aria-live 属性は、ウェブページの特定領域の内容が動的に更新された際に、スクリーンリーダーなどの支援技術にその変更を通知するためのWAI-ARIA属性です。aria-live="polite" を設定した領域の内容が更新されると、支援技術は現在の読み上げが一段落した後にその変更を読み上げます。完了メッセージが表示される領域にこの属性を設定することで、ユーザーはフォーム送信が完了したことを即座に、かつ割り込みなく知ることができます。これは、特に非同期でフォーム送信が行われ、画面全体が再読み込みされない場合に有効です。
まとめ
フォーム送信後の確認画面と完了画面のアクセシブルな設計は、ユーザーがウェブサイトでの手続きを最後まで安心して完了するために不可欠です。入力内容の確認のしやすさ、完了したことの明確な通知、次に取るべき行動の提示など、細部にわたる配慮が求められます。
これらの工夫は、特定の障害を持つユーザーだけでなく、全ての人にとって使いやすく、分かりやすいウェブサイト体験を提供することにつながります。利用者がフォームを通じて目的を達成できたという確信を持つことは、ウェブサイトへの信頼感を高め、サービスの利用継続にも繋がるでしょう。情報のユニバーサル化という観点からも、この確認・完了プロセスへの配慮は非常に重要な設計ポイントと言えます。