アクセシビリティ上の理由から、フォームの最初の無効な入力は、フォームの送信時に集中する必要があります。これにより、目の見えないユーザーが無効な入力を探す必要がなくなります。
私の質問はタブオーダーに関するものです。最初の無効な入力がフォーカスされた後、ユーザーがタブを再度クリックしたときに、フォーカスは次の無効な入力に移動する必要がありますか?
たとえば、この擬似コードを見てください。入力番号 2 と 4 にエラーがある場合、フォームが送信されると、フォーカスは入力番号 2 に移動します。次にユーザーがtabキーを押すと、フォーカスは入力 3 または 4 に移動しますか?
<input id="1">
<input id="2"> <-- invalid
<input id="3">
<input id="4"> <-- invalid
<input id="5">
<button type="submit">
通常のタブ オーダーで次の要素にフォーカスします。タブ オーダーは 1-2-3-4-5 のままにする必要があります。
使用するテクニックは、W3C によって提案されたもの ( G139: ユーザーがエラーにジャンプできるようにするメカニズムの作成)とはかなり異なります。
ユーザーがチェック済みのデータ入力を入力し、入力エラーが検出されると、ユーザーが検索する必要がないように、そのエラーへのリンクが提供されます。
あなたのアプローチは、「エラーの要約を含むフォームを再表示する (リンク追加予定)」かもしれません。
あなたの場合、タブ オーダーを変更して不足しているフィールドのみを表示するべきではありませんが、buttonすべてのフィールド間でビューを切り替えるか、不足しているフィールドのみを表示するように指定できます。
次のフィールドが欠落しているか無効です。以下に記入してください (または完全なフォームに戻ってください)。