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


134

メアリーには小さなフォームがあり、そのフィールドにはラベルが付けられていました。
エラーが発生すると、混乱が生じます。

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

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


何が起こるか試してみましたか?それが機能する場合、フォームやページに損傷を与えることはないと思います。また、使用すると検証エラーをクリックして正しいフィールドにフォーカスできるので、プラスになります。
フェリペシ

私は試しませんでしたが、可能だと思います。しかし、私はそれを使用することをお勧めしません。ラベルはフィールドの目的を定義するため、エラーメッセージはそうではありません。したがって、検証警告にラベルを使用するべきではありません。
グイドヘンドリックス

1
これは一般的なUI設計/使いやすさの質問ですか?
jball

うん。それは「動作する」です...しかし、これが悪いデザインである理由がありますか?私はそれがアクセシビリティの理由かもしれないと思いますが、通常のユーザーの場合、エラーメッセージをクリックして混乱したフィールドに移動できると物事が簡単になると思います...それがどうなるかわかりません「視覚障害者用のリーダー」などを台無しにする。
aslum、

1
場合によっては、コントロールとテキストを1つに入れる方が簡単labelです。forおよびid属性を省略することもできます。仕様では、この暗黙の関連付けを呼び出します。
rybo111

回答:


158

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

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

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


2
これは、実際にはHTMLよりも使いやすさやアクセシビリティの問題です。htmlが機能します。
aslum

2
私たちはすべて有効なコードのみを使用する必要があります。そうしないと、将来的に、または他の誰かのために、あるいはJSライブラリなどで問題が発生する可能性があります。
シェルナンデス2014

1
正解はロブのです。このソリューションは、視力のあるユーザーに対して機能し、一部のスクリーンリーダーでは失敗します。Aslum、Robが回答を提出する前に、上記のjsummersの回答を受け入れたと思います。
ケージの歯打ち機2015年

3
@AvramLavinskyいいえ、これは「フィールドに2つのラベルを付けることができるか」に対する正しい答えです。仕様はかなり明確です。クライアントがどのように解釈するかは、クライアント次第です。「aria-labeledby」にリンクしている「aria-writtenby」へのリンクは、壊れたスクリーンリーダーを「修正」する方法です。
James Sumners、2015年

Funny MDNは、「1つの入力を複数のラベルに関連付けることができる」と述べています。developer.mozilla.org/en-US/docs/Web/HTML/Element/label
2540625 '06 / 12/19

40

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

アクセシビリティの理由で正しく行うのは少しトリッキーです。

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

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

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


1
これは正しいです。これをコード化する正しい方法は、aria-describeby属性を使用することです
ケージラットラー

27

はい、複数のラベルを同じフォームコントロールに向けることができます。これは完全に合法です:

<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つのラベルで閉じています。


13
「属性LABELを介して複数の参照を作成することにより、複数のコントロールが同じコントロールに関連付けられる可能性がある」と明確に記載されているドキュメントへのリンクの+1 for
alexg 2013
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.