LEARN BY EXAMPLE

3.3.3 エラー修正の提案 レベル AA

入力の直し方を具体的に提案する。

概要

入力エラーを自動で見つけ、修正方法がわかっている場合は、その方法を利用者に提案します。 ただし、提案するとセキュリティやコンテンツの目的を損なう場合は除きます。

誤りはわかった。どう直せばいい?

利用者が困る例 誤りの内容だけを伝える

イベントのお申し込み

入力に誤りがあります。

メールアドレス
taro.example.com

メールアドレスの形式が正しくありません。

入力内容を確認

どんな形に直せばいい?
形式の誤りはわかっても、直し方が示されていません。

改善した例 具体的な入力例を添える

イベントのお申し込み

入力に誤りがあります。

メールアドレス
taro.example.com

メールアドレスの形式が正しくありません。

例:taro@example.comの形式で入力してください。

入力内容を確認

入力例を見ながら直せる。
利用者が自分のアドレスの書き方を確認できます。

図:メールアドレスの形式の誤りを自動検出し、必要な形式もわかっている場面の比較。どちらも同じ入力値を残しています。「改善した例」は入力例を添えたもので、自動修正ではありません。操作するフォームではなく、説明用の図です。

達成できないと起こる問題の例

イベントの申込フォームで、メールアドレスとして「taro.example.com」を入力し、形式の誤りが自動で検出されました。画面には「メールアドレスの形式が正しくありません」と表示されます。

入力形式という言葉に慣れていない利用者は、誤りがあることはわかっても、どんな形に直せばよいのか判断できません。必要な入力形式は決まっているのに、その説明がありません。

達成するための改善例

同じエラー文に「例:taro@example.comの形式で入力してください」と添えます。利用者は入力例を見ながら、自分のメールアドレスの書き方を確認し、直せます。

入力例は形式を示すためのものです。この例のアドレスを利用者の連絡先として決めたり、自動で書き込んだりするものではありません。

確認のポイント

  • 入力エラーを自動で見つけたとき、修正方法がわかっていれば、利用者に提案していますか。
  • 必要な入力形式や選べる値など、直すための手がかりを示していますか。
  • 「正しく入力してください」だけで終わらず、どう直せばよいかわかる説明になっていますか。
  • 提案によってセキュリティやコンテンツの目的を損なわないか、確認していますか。

条件と補足

修正方法がわかっている場合に提案する

この基準は、入力エラーが自動で検出され、修正方法がわかっている場合に適用します。すべての誤りを自動で検出したり、利用者が本来入力したかった内容を必ず推測したりすることまでは求めていません。

例えば、必要な入力形式が決まっていれば、その形式の例を示せます。入力できる値が決まっていれば、選べる値の一覧を示す方法もあります。利用者が次に何をすればよいかわかる提案にします。

3.3.1は誤りの内容、3.3.3は直し方

基準 この場面で伝えること
3.3.1 エラーの特定(A) 「メールアドレスの形式が正しくありません」と、どの項目に何の誤りがあるかを伝える。
3.3.3 エラー修正の提案(AA) 形式の例を添えるなどして、どう直せばよいかを提案する。適用条件と例外がある。

図の「利用者が困る例」も、誤りの項目と内容を伝える点では3.3.1を達成しています。一方、修正方法を示せるのに提案していないため、利用者は直し方を判断できません。これは3.3.3で扱う問題です。

セキュリティや目的を損なう場合の例外

提案を示すことでセキュリティやコンテンツの目的を損なう場合は、その提案を求めません。単に説明を作る手間がかかる、表示場所が足りないという理由で、この例外に当てはめることはできません。

提案と、入力内容の自動的な変更を区別する

この図では、利用者が入力した値を残したまま、修正の手がかりを示しています。システムが推測した連絡先を正しい値として確定する例ではありません。利用者が自分の連絡先を確かめて修正します。

提案を表示する方法は項目の近くの説明や、選べる候補など、内容に合わせて選びます。特定の表示方法だけが必須という意味ではありません。

ここで示した改善例はメールアドレスの形式の誤りに修正方法を示す場面についてのものです。フォームやサイト全体のWCAG適合を示すものではありません。

参照資料

テクニックは達成する方法の例です。すべてのフォームで同じ入力例を添えることが必須という意味ではありません。

出典の最終確認: 2026-11-08。画面と説明文は、この教材のために作った例です。