メアリーには小さなフォームがあり、そのフィールドにはラベルが付けられていました。
エラーが発生すると、混乱が生じます。
各入力フィールドのラベルを持っています...かなり標準的な出来事です。フォームを検証した後、フォームの上部に、不足している情報や間違っている情報を詳しく説明する、役立つ小さな段落を表示しています。
同じ入力フィールドに2つのラベルを付けることはできますか?1つは適切な形式で、もう1つは検証リマインダーテキストで?これをしてはいけない理由はありますか?
メアリーには小さなフォームがあり、そのフィールドにはラベルが付けられていました。
エラーが発生すると、混乱が生じます。
各入力フィールドのラベルを持っています...かなり標準的な出来事です。フォームを検証した後、フォームの上部に、不足している情報や間違っている情報を詳しく説明する、役立つ小さな段落を表示しています。
同じ入力フィールドに2つのラベルを付けることはできますか?1つは適切な形式で、もう1つは検証リマインダーテキストで?これをしてはいけない理由はありますか?
回答:
この質問はHTMLフォームに関するものだと思います。仕様から:
LABEL要素は、コントロールに情報を添付するために使用できます。各LABEL要素は、厳密に1つのフォームコントロールに関連付けられています。
したがって、各フォームコントロールは複数のラベルで参照できますが、各ラベルは1つのコントロールしか参照できません。したがって、コントロールに2番目のラベルを付けることが理にかなっている場合(そして、あなたが説明している状況では、2番目のラベルを追加してもかまいません)。
HTMLは合法であり、機能します(ラベルをクリックすると、問題のフィールドにフォーカスが移動します)。
アクセシビリティの理由で正しく行うのは少しトリッキーです。
これは「一般的な」アプローチではありません。そのため、少なくとも1つの一般的なスクリーンリーダー(NVDAでテストしました)では、フィールドにフォーカスを移動したときに最初のラベルのみが読み取られます。同じフィールドの追加のラベルは無視されます。
したがって、エラーメッセージがページの上部にある場合、視覚障害者または視力の弱いユーザーがフィールドをタブ移動すると、そのフィールドの横にある「実際の」ラベルではなく、問題のフィールドに着地したときにエラーメッセージだけが聞こえます。
したがって、エラーメッセージを適切に表現すれば、それは良いことかもしれません(検証されていないフィールドを赤で強調表示するよりも確かに優れています!)。
はい、複数のラベルを同じフォームコントロールに向けることができます。これは完全に合法です:
<label for="fname">First name</label>
<label for="fname">Enter your info</label>
<label for="fname">Why not a third label</label>
<input type="text" id="fname" name="fname">
これはほんの一例です...通常、これらの行は1つのラベルで閉じています。
LABEL
を介して複数の参照を作成することにより、複数のコントロールが同じコントロールに関連付けられる可能性がある」と明確に記載されているドキュメントへのリンクの+1 for
。