エラーの発生とエラーの内容が特定できる

概要

この基準では、操作中にエラーが発生したときに、エラーの内容や、発生箇所が特定できるよう提示されているかを確認してください。エラーの内容や箇所がわからないと、エラーを解消できず、操作を完了できません。

メリット

1. すべてのユーザー: エラーの発生箇所や原因がすぐにわかり、フォームの修正や操作の再試行がしやすくなります。
2. 認知障害のあるユーザー: エラーが明確に示され、その修正方法が具体的に説明されるため、操作がわかりやすくなります。

達成方法

1. エラーの位置と内容を明確にする:

   • エラーが起きた場所（例えば、特定のフォームフィールド）の近くに、エラーの内容と修正方法を明確に示すメッセージを表示します。
   • 例）SmartHR UIの <FormControl> の errorMessages プロパティを利用して、エラーの内容を示す。
   • フィードバック | デザインパターン（共通） も参考にしてください。

2. スクリーンリーダーへのエラーメッセージ通知:

   • aria-describedby 属性を使用してエラーメッセージと入力欄を関連付けすることで、エラー内容を把握しやすくします。
   • aria-invalid 属性を用いることで、入力欄にエラーが発生していることを示します。
   • いずれもSmartHR UIの入力コンポーネントの error Props や errorMessages Props を利用することで、自動的に属性は付与されます。

テスト方法

1. エラーメッセージの視覚的確認:
   • フォームを意図的に誤って記入して送信し、エラーメッセージが適切な位置に表示され、内容が明確であるかを確認します。
2. エラーメッセージのマークアップの確認:
   • エラーが複数起きた際に、エラーメッセージとエラー箇所が、関連付けされていたりDOMとして近接しているかを確認する。

関連するWCAG2.1達成基準

• 達成基準 3.3.1: エラーの特定を理解する