html - 入力フィールドに2つのラベルを付けることはできますか？

Question

メアリーには小さな形があり、そのフィールドにはそのようにラベルが付けられていました。
エラーが忍び寄るときはいつでも、混乱がまきます。

各入力フィールドのラベルがあります...かなり標準的な事柄です。フォームを検証した後、フォームの上部に、不足している情報や正しくない情報の詳細を示す役立つ小さな段落を表示しています。

同じ入力フィールドに2つのラベルを付けることはできますか？1つは適切な形式で、もう1つは検証リマインダーテキストにありますか？私がこれをすべきではない理由はありますか？

Answer 1

この質問はHTMLフォームに関するものだと思います。仕様から：

LABEL要素は、コントロールに情報を添付するために使用できます。各LABEL要素は、1つのフォームコントロールに関連付けられています。

したがって、各フォームコントロールは複数のラベルで参照できますが、各ラベルは1つのコントロールしか参照できません。したがって、コントロールに2番目のラベルを付けることが理にかなっている場合（そしてあなたが説明する状況ではそうです）、2番目のラベルを自由に追加してください。

Answer 2

HTMLは合法であり、機能します（いずれかのラベルをクリックすると、問題のフィールドにフォーカスが移動します）。

アクセシビリティの理由から、正しく行うのは少し難しいです。

これは「一般的な」アプローチではありません。そのため、少なくとも1つの一般的なスクリーンリーダー（NVDAでテスト）は、フォーカスをフィールドに移したときに最初のラベルのみを読み取ります。同じフィールドの追加のラベルは無視されます。

したがって、エラーメッセージがページの上部にある場合、フィールドをタブで移動する視覚障害者または弱視のユーザーには、問題のフィールドに到達したときにエラーメッセージだけが聞こえ、その横にある「実際の」ラベルは聞こえません。

したがって、エラーメッセージを適切に表現すれば、それは良いことかもしれません（検証されていないフィールドを赤で強調表示するよりも確かに良いです！）。

Answer 3

はい、同じフォームコントロールで複数のラベルポイントを指定できます。これは完全に合法です：

<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つのラベルで折り返します。