web-dev-qa-db-ja.com

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

メアリーには小さなフォームがあり、そのフィールドにはそのようにラベルが付けられています。
エラーが入り込むたびに、混乱が生じます。

各入力フィールドにラベルを付けました...かなり標準的なことです。フォームを検証した後、フォームの一番上に、不足している情報や不正確な情報を詳しく説明した便利な小さな段落を表示しています。

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

htmlformslabels
116
aslum

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

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

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

136
James Sumners

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

アクセシビリティの理由から正しいことをするのは少し厄介です。

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

したがって、エラーメッセージがページの上部にある場合、視覚障害のあるユーザーや弱視のユーザーがフィールドをタブで移動すると、そのフィールドに着陸するときにエラーメッセージだけが聞こえます。

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

35
Rob Whelan

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

<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つのラベルでラップします。

24
Gert Grenander

正当ではありますが、複数のラベルを単一の<input>要素に関連付ける最良の方法ではありません。代わりに、 aria-labelledby 属性を使用する必要があります。

最初に、<label>要素に一意のid属性を与えます。次に、aria-labelledby属性を<input>要素に配置し、その値を<label>要素のid値にスペースで区切って設定します。

MDN Webドキュメントの "aria-labelledby属性の使用" ページの例を次に示します。

<div id="billing">Billing</div>

<div>
    <div id="name">Name</div>
    <input type="text" aria-labelledby="billing name"/>
</div>
<div>
    <div id="address">Address</div>
    <input type="text" aria-labelledby="billing address"/>
</div>
0
John S