入力とのHTMLラベルの関連付け。悪いUX？
私は奇妙なUX問題を抱えているWeb開発者です。 HTMLフォームを作成するとき、すべての入力のラベルが<label></label>タグを介して実装され、各ラベルがfor属性を使用して入力に関連付けることを確認します。例えば：
<label for="firstName">First Name</label>
<input id="firstName" type="text" />
<label for="lastName">Last Name</label>
<input id="lastName" type="text" />
これは、私がいつも聞いているアクセシビリティのベストプラクティスに従うものです。これには、ラベルがクリックされたときに入力に焦点を合わせるという追加の利点があると私が考えるものもあります。
ここの他の人々は、その最後の点に同意しません。
彼らは実際に、ラベルをクリックして入力に焦点を合わせるのは奇妙であり、それが「非標準」の動作であると言います。私が標準のHTMLプラクティスと見なしているものを使用しているので、それは確かに標準であると思います。おそらくこれは、サイト内の他のページが実際のラベルを使用しておらず、この動作をしていないという事実に対する彼らの反応ですが、彼らはこのラベルの動作を本当に嫌っているようです。
わかりません。私はここで間違っていますか？ラベルに入力に焦点を当てることは、UXの習慣としては悪いと考えられていますかもしそうなら、なぜですか？これを修正する必要がある場合、ラベルを使用せずに入力にアクセスしやすくする別の方法はありますか？
フォームフィールドのクリック領域を減らしたい理由を理解できません。 labelタグに「for」属性を含めると、クリック可能な領域を増やすことができます。それはかなり長い間ウェブ標準でした、そして私はほとんどのユーザーがこの時点での振る舞いに慣れていると思います、それを慣習にします。ソフトウェアの慣例ではないかもしれませんが、私は間違いなくそれをウェブの慣例と考えています。
ここでの最大の利点は、確かに アクセシビリティの向上 （フォーム入力ラベルのセクションを参照）です。
これは単にチェックボックスとラジオボタンに当てはまるとは思いません。ラジオボタンやチェックボックスほどのヘルプはありませんが、テキスト入力に使用すると便利な場合もあります。
W3Schoolsが参考文献の中で使いやすさの向上として言及している であることも確認できますが、確かにこれは最良の参考資料ではない可能性があります。ただし、 HTML 4.01仕様 を見ると、ラベルタグの「for」属性は、明示的に別のコントロールに関連付けられていることを確認するためのものであり、仕様では、「LABEL要素がフォーカスを受け取ると、関連するコントロールにフォーカスを渡します。」.
この ウェブデザインブログ と同様に、フィールドとラベルが関連付けられていない場合、これはユーザビリティの「犯罪」であることがわかります。
それらの「その他」は正しくありません。これはis HTMLラベルタグの意図と適切な実装です。アクセシビリティの必要性は別にして、特にチェックボックスなどの小さなUXチェックボックスよりもラベルにヒットするほうが簡単な場合に、UXの大きなメリットになります。
これらの「他の人」が嫌いな場合は、ラベルをクリックするのをやめるように言ってください。 ;）
これはかなり議論の余地があります。
タッチデバイスの場合、特にテキスト入力の場合にクリック可能な領域を拡大すると、ユーザーが入力を埋めるのではなくフォームを下にスクロールすることを意図している場合、実際には逆効果になることがあります。