フォームで迷いやすいのは、何を入力すればよいか分からないとき、入力が受け付けられなかった理由が分からないとき、送信前に内容を直せないときです。
JIS X 8341-3:2016では、利用者が入力ミスを避け、エラーに気づき、修正できるようにする「入力支援」が扱われています。
入力欄を赤くするだけでは、どこにどのような問題があり、何を直せばよいかまでは伝わりません。
入力前の説明から送信前の確認までを一つの流れとして設計すると、フォームの分かりにくさを減らせます。
入力支援が扱う範囲
入力支援とは、入力ミスを避けやすくし、発生したエラーを見つけて修正できるようにするための設計です。
単一の機能名ではなく、ラベルや入力方法の説明、エラーの通知、修正方法の提示、送信前の見直しなど、複数の対策をまとめて捉える考え方です。
| 場面 | 利用者が困ること | 支援の例 |
|---|---|---|
| 入力前 | 項目の意味や入力形式が分からない | 明確なラベル、必須項目の表示、入力例、候補の提示 |
| エラー発生時 | 問題のある項目や直し方が分からない | 項目を特定するメッセージ、エラー内容の説明、修正案 |
| 送信前 | 入力内容を見直せない | 確認画面、または送信前に内容を確認して修正できる手順 |
エラーメッセージは「場所、問題、直し方」を伝える
エラーメッセージは、エラーがあることだけでなく、どの項目に何が起きたかをテキストで伝えます。
修正方法が分かっている場合は、その方法も同じ場所で示すと、利用者は前の説明を探し直さずに済みます。
- 場所：どの入力項目に問題があるかを示す
- 問題：未入力なのか、入力形式が合わないのかを示す
- 直し方：必要な入力や利用できる形式を具体的に示す
たとえば「必須項目が未入力です」だけでは、複数の項目があると修正箇所を探さなければなりません。
「氏名を入力してください」と書けば、対象と修正方法を一度に伝えられます。
赤枠などの視覚的な強調は補助として使い、同じ内容をテキストでも示すと、色の違いに気づきにくい利用者にも伝わりやすくなります。
入力前に迷わせないラベルと説明
ラベルは、その入力欄に何を記入するかを示す名前です。
入力欄の近くにラベルを置き、必須か任意か、決まった形式があるかを入力前に分かるようにします。
日付やメールアドレスなど、形式を誤りやすい項目では、短い入力例が手掛かりになります。
候補の一覧、オートコンプリート、カレンダー入力なども、内容に合えば入力の手間と誤りを減らす助けになります。
ただし、これらの機能を置くだけで説明が不要になるわけではありません。
利用者が候補を使わずに入力する場合にも、項目の意味と入力方法が分かる状態を保ちます。
自動修正よりも修正案を示す
入力内容を自動で書き換えると、利用者の意図と異なる値に変わっても気づかないおそれがあります。
修正候補を示せる場合は、候補を提示し、採用するかどうかを利用者が選べる形にすると確認しやすくなります。
自動で整形する場合も、最終的に送信される内容を利用者が確認できるようにします。
送信前に確認と修正の機会を設ける
誤った内容を送ると修正に手間がかかるフォームでは、送信前に入力内容を見直せるようにします。
確認画面を設ける場合は、内容を表示するだけでなく、該当する入力欄へ戻って修正できる手順も必要です。
すべてのフォームに独立した確認画面を置くのではなく、送信の影響と修正のしやすさに応じて方法を選びます。
実装とレビューのチェックリスト
- 各入力欄に、内容を特定できるラベルがある
- 必須項目と入力形式を、入力する前に確認できる
- エラーのある項目と問題の内容をテキストで示している
- 分かっている修正方法を具体的に案内している
- 色や枠線だけに頼らず、メッセージでもエラーを伝えている
- オートコンプリートや候補表示を使わなくてもフォームを完了できる
- 重要な送信では、内容を見直して修正できる
レビューでは、正しい値を入れて完了できるかだけでなく、未入力、形式違い、複数項目の同時エラーも試します。
エラーが出た後に迷わず修正できるかまで確認すると、表示だけでは見つけにくい問題を発見できます。
フォーム全体の設計例は、WCAG 2.2で押さえる入力支援とエラー設計の基本と、フォームのアクセシビリティ完全ガイドでも確認できます。
入力支援を改善する順番
まず、ラベルと入力方法の説明を整えます。
次に、エラーが起きた項目、問題、修正方法をテキストで伝えます。
最後に、送信の影響が大きいフォームで確認と修正の手順を用意します。
入力前、エラー発生時、送信前を順に点検すれば、利用者がどこで行き詰まるかを整理しやすくなります。
当社では、ウェブアクセシビリティ対応を支援するUUU ウェブアクセシビリティウィジェットツールを提供しています。アクセシビリティ改善を検討している方は、サービスの詳細をご覧ください。