入力支援のガイドライン

3.3.1エラーの特定の達成基準（レベルA）

入力フォームのエラーを明確にし、修正のための指示を提供する

この達成基準は、利用者がエラーを発見し、その原因を理解し、修正するための指示を提供することにより、使いやすさと効率性を高めることを目的としています。エラーの発生とその内容を容易に認識できるようにすることで、ウェブサイトの利用満足度を高めることができます。

実践すべきこと

WCAG 2.0

エラーメッセージの明確化

• フォーム入力時にエラーが発生した場合、そのエラー内容をテキスト形式で提供する。

修正指示の提供

• エラーの原因となった問題を特定し、具体的な修正方法をテキスト形式で提供する。

運用者への注意

定期的な確認

• 新規ページや更新されたコンテンツにおいて、エラー発生時の情報提供が利用者にとって理解しやすい形で行われているかを定期的にチェックする。

開発者への注意

エラーメッセージの表示

• エラーが発生した際には、エラーメッセージをテキスト形式で表示し、エラーの理由と修正方法を具体的に説明する。

メッセージの位置

• エラーメッセージは、利用者が見落としにくい位置に表示し、エラーの修正が迅速に行えるようにする。
• エラーメッセージは、入力フィールドの上に表示するのが望ましい。

メッセージの内容

• エラーメッセージは、利用者向けに伝わりやすい言葉で書く。
• エラーの原因だけでなく、具体的な修正方法も含める。

3.3.2ラベル又は説明の達成基準（レベルA）

入力ミスを減らせるよう入力フォームのラベルと説明を明確にする

この達成基準は、利用者がフォームやその他の入力フィールドにおいて入力ミスを最小限に抑えられるようにすることを目的としています。適切なラベル、必須の有無、入力例などの情報を提供することで、利用者は求められている入力内容を正しく理解でき、入力ミスが減少します。

実践すべきこと

WCAG 2.0

明確なラベルと説明

• 各フォーム入力項目には、その内容を明確にするラベルや説明文を提供する。

必須項目の明示

• 入力が必須である項目は、明確に示して利用者が見落とさないようにする。

入力例の提供

• 特定のフォーマットが求められる入力項目には、具体的な入力例を提供し、入力ミスを防ぐ。

運用者への注意

定期的な確認

• 新規ページや更新されたコンテンツにおいて、適切なラベルや説明が設定されているかを確認し、利用者が容易に理解できるかを定期的にチェックする。

開発者への注意

ラベルの適切な設定

• フォーム入力項目に対してわかりやすいラベルを設定し、for属性やaria-labelledbyなどを使用してフォームコントロールと明確に関連付ける。

適切な説明

• 入力フィールドに対するヘルプテキストを置くことで、入力方法を詳しく説明できる。

読み上げへの対応

• スクリーンリーダーではplaceholderのテキストも読み上げられるため、「〇〇を記入してください」など冗長にならないように注意が必要。

3.3.3エラー修正の提案の達成基準（レベルAA）

入力フォームのエラーに対する適切な修正候補を提供する

この達成基準は、利用者がエラーを容易に理解し、修正できるようにすることを目的としています。入力ミスなどでエラーが発生した際に、適切な修正候補を提供することで、利用者はエラーの内容を正しく把握し、次の入力へとスムーズに進めることができます。

実践すべきこと

WCAG 2.0

適切な修正候補の提供

• エラーが発生した際に、利用者が次に取るべき適切なアクションを示す修正候補を提供する。

運用者への注意

定期的な確認

• 新規ページや更新されたコンテンツにおいて、エラー時に提供される修正候補が利用者にとって適切で理解しやすいものであるかを定期的にチェックする。

開発者への注意

エラーメッセージの表示

• エラーが発生した際には、エラーメッセージをテキスト形式で表示し、エラーの理由と修正方法を具体的に説明する。

メッセージの位置

• エラーメッセージは、利用者が見落としにくい位置に表示し、エラーの修正が迅速に行えるようにする。
• エラーメッセージは、入力フィールドの上に表示するのが望ましい。

メッセージの内容

• エラーメッセージは、利用者向けに伝わりやすい言葉で書く。
• エラーの原因だけでなく、具体的な修正方法も含める。

3.3.4エラー回避（法的、金融及びデータ）の達成基準（レベルAA）

重要な決定の前には、利用者が内容を確認・修正できる手順を設ける

この達成基準は、利用者が重要な決定を行う際、特に法的な義務や金銭的な取引が関わる場合に、間違いを犯すリスクを最小限に抑えるための手順を設けることを目的としています。すぐに処理される取引や後から変更することができない重要な決定の場合、その決定を十分に理解し、変更を加える機会を持つことを確実にすることで、深刻なミスを避けることができます。

実践すべきこと

WCAG 2.0

確認・修正手順の提供

• 利用者が重要な情報を送信する前に、その内容を確認し、必要に応じて修正できる手順を設ける。

手順の明示

• 確認や修正ができるステップを利用者に対して明確に提供し、わかりやすく案内する。

運用者への注意

定期的な確認

• 新規ページや更新されたコンテンツにおいて、法的、金銭取引が関わる操作に対して適切な確認・修正機会が設けられているかを定期的にチェックする。

開発者への注意

確認・修正ステップの実装

• 法的義務や金銭取引を伴う操作に対して、利用者が内容を確認し、修正できるステップを必ず設ける。

利用者への案内

• 確認画面では、入力内容を要約して表示し、利用者が内容を理解しやすいようにする。
• 修正ボタンを設置し、確認画面から入力画面に戻れるようにする。
• 送信ボタンには、「注文を確定する」など、アクションの内容を明確に表示する。

3.3.5 ヘルプの達成基準（レベルAAA）

WCAG 2.1 解説書

3.3.6 誤り防止 (すべて)の達成基準（レベルAAA）

WCAG 2.1 解説書

3.3.7 冗長な入力の達成基準（レベルA）

WCAG2.2

3.3.8 アクセシブルな認証の達成基準（レベルAA）

WCAG2.2

3.3.9 ヘルプの達成基準（レベルAAA）

WCAG2.2

目次へ戻る