インライン、フォーカス離脱時、送信時：タイミングが重要

同じエラーメッセージでも、表示されるタイミングによって役立つこともあれば、煩わしいこともあります。タイミング自体がアクセシビリティ上の判断事項です。⏱️

送信時にすべてを確認する方法は予測しやすく、操作を中断しません。ほとんどすべてのフォームで最も安全なデフォルトです。

キーストロークごとに検証すると、ユーザーが入力を終える前にフィールドを誤りとして示してしまいます。このインラインでの催促は、誰にとってもストレスになります。

ユーザーがフィールドを離れたとき、つまり blur のタイミングで確認すると、まず入力を終えてから、自然な区切りでフィードバックを受け取れます。

入力中に突然表示されるエラーは、スクリーンリーダーの読み上げを妨げることがあります。通知する前に、blur や送信などの適切なタイミングを待ってください。

フィールドでエラーが発生し、ユーザーが修正している段階では、入力中に再検証しても問題ありません。エラーが解消されつつあることを確認できます。

WCAG はユーザーを急かさないよう求めています。入力内容を消去するタイムアウトを避け、各自のペースでフィールドを完了できるようにしてください。

required と目に見える注記を使って、必須フィールドを最初に示してください。送信後ではなく、送信前にルールを把握できます。

タイミングにかかわらず、何が問題で、どう修正すればよいかを伝えてください。最適なタイミングで表示される曖昧なメッセージより、明確なメッセージのほうが役立ちます。

ネイティブ HTML の検証は、デフォルトでは送信時に実行されます。type や required などの組み込み属性を使えば、適切なタイミングを無料で利用できます。

1つのタイミング戦略を選び、フォーム全体に適用してください。予測可能な動作なら、ユーザーはパターンを学習し、安心して利用できます。

キーストロークごとではなく blur または送信時に検証し、修正中はインラインで再確認します。ルールは早めに示し、一貫性を保ってください。✅