入力しやすいフォームとは？項目名・エラー・送信完了の見直し方

入力前に、何が必要か分かるようにする

問い合わせや申し込みのフォームでは、運営側が知りたいことと、その手続きを進めるために必要なことが一致するとは限りません。利用者にとって、まだ決まっていない予算や日程を必須で聞かれると、何を書けばよいか迷う場面もあります。

W3C WAIのフォーム解説は、手続きの完了に必要な情報だけを求めることを案内しています。WAIは、Webを障害のある人にも利用しやすくするためのW3Cの取り組みです。本記事ではこの資料をもとに、基本的な見直し方を扱います。

たとえば、架空の見学申し込みフォームで、受付時には人数と連絡先が分かればよいのに、詳細な訪問目的まで必須にしているとします。その情報がいつ必要なのかを運営担当者と整理すれば、任意にする、後で聞く、選択肢にする、といった案を比較できます。項目を減らすこと自体ではなく、手続きを進めるための理由があるかが判断の手がかりです。

項目名と入力例は、役割を分ける

入力欄の中に薄く表示される例文は、プレースホルダーと呼ばれます。「例：山田 太郎」のような見本には使えますが、入力すると消えるため、項目名の代わりにすると何の欄だったかを見返しづらくなります。

WAIの入力方法の説明でも、プレースホルダーはラベルの代わりにならないことが示されています。また、ラベルの付け方は、項目名と入力欄をプログラム上でも関連付ける方法を案内しています。これは、画面を音声で読み上げるスクリーンリーダーなどに、入力欄の意味を伝えるためにも役立ちます。

画面を確認するなら、入力済みの状態でも「メールアドレス」「見学希望日」といった項目名が分かるかを見てください。必須・任意や日付の形式も、入力に取りかかる時点で読める場所にあると、後戻りを減らしやすくなります。

開発担当者には、見た目の配置だけでなく、項目名と入力欄が正しく関連付いているかも確認してもらうとよいでしょう。文字が近くに表示されているだけでは、その関係が読み上げソフトに伝わるとは限りません。

エラーは「どこを、どう直すか」まで伝える

送信を押して赤い枠が出ても、何が問題なのか分からなければ修正できません。色だけに頼らず、対象の項目名と直し方を文章で示すと、利用者が次の操作を選びやすくなります。

WAIの利用者への通知の解説では、分かりやすいエラーの説明、修正方法、対応する入力欄への移動などを案内しています。次の表は、その考え方を踏まえて本記事で作った文面例です。

最後の例の人数条件は架空のものです。実際のフォームでは、受付条件と一致する説明にする必要があります。画面の文章だけを丁寧にしても、受け付ける値が説明と違っていれば迷いは残ります。

エラーが複数あるときは、一覧から該当する欄へ移れるか、修正しなくてよい入力内容が残っているかも確認してみましょう。入力し直す範囲が分かることまで含めて、修正のしやすさを考えられます。

送信後の状態を、利用者に伝える

同じWAIの通知ガイドは、成功したことを伝えるメッセージも重視しています。ボタンを押した後に画面が変わらなければ、利用者には、処理中なのか、受け付けられたのか、失敗したのかが分かりません。

見学申し込みの仮例なら、「送信中」と「申し込みを受け付けました」は別の状態です。さらに、受付と予約確定が異なる運用なら、「担当者からの連絡をもって日程が確定します」と説明できます。画面の完了表示を、実際に完了した手続きに合わせることがポイントです。

確認には、テスト用の環境や運営者と合意した方法を使い、通常の問い合わせとして何件も送らないようにしてください。スマートフォンで最後まで入力する、キーボードだけで項目間を移る、意図的に空欄を残して直す、といった試し方ができます。

この確認だけでアクセシビリティ全体を評価できるわけではありません。それでも、「項目名が消える」「エラーの場所へ戻れない」「送信結果が分からない」といった具体的な問題を、担当者へ伝える入口になります。

まとめ

フォームを見直すときは、入力から送信後までを一続きで確かめてみましょう。

• 入力前：必要な項目、項目名、必須・任意、書き方が分かる。
• 修正時：間違った場所と直し方が分かり、その欄へ戻れる。
• 送信後：何が完了し、次に何が起きるかが分かる。

最初に一つのフォームを選び、入力を始めてから完了するまでを通してみると、項目単体の確認では気づかなかった不便が見つかるかもしれません。

フォームにたどり着く前の案内も見直したい場合は、ホームページの問い合わせ導線を確認するポイントが参考になります。