web-dev-qa-db-ja.com

チェックボックスとラベルの間のスペースはクリック可能にする必要がありますか？

たとえば、次の2つのシナリオを考えてみましょう。どちらも非常に似たHTMLですが、意味的には異なります。

シナリオ1：

<label for="myCheckbox">
    <input type="checkbox" id="myCheckbox" />
    My Checkbox
</label>

シナリオ2：

<input type="checkbox" id="myCheckbox" />
<label for="myCheckbox">My Checkbox</label>

これらは両方ともappearとまったく同じものを生成します。ただし、そうではありません。違いは、チェックボックスとラベルの間の暗黙的なスペースです。最初のシナリオでは、このスペースはラベルの一部であるため、チェックボックスもアクティブにします。ただし、2番目のシナリオは、ラベルの外側にあるため、そうなりません。これらは、ユーザーがクリックした場合に期待どおりにチェックボックスをアクティブ化しない小さなスペースを作成します。

My CheckboxMy CheckboxMy Checkbox

チェックボックスの設定方法によっては、さらに広いスペースが存在する可能性があります。たとえば、チェックボックスを左にフロートさせ、10、15、または20ピクセルのマージンを右に配置した場合などです。

通常、UXについて考えるとき、関連するブロック全体を同じものに対してすべてクリック可能にしようとします。私にとって、チェックボックスの左側からラベルの右側までは、コントロールをアクティブにする1つの固体ブロックの一部である必要があります。

チェックボックスとそのラベルテキストの間のスペースもアクティブにする必要がありますか？あなたがこれをしたくないいくつかの（もしあれば）状況は何ですか？

htmlcheckboxes
80
animuson

ユーザーの目にある領域全体が「選択」であるため、私はそれをすべきだと思います。さて、あなたはこの問題を別の角度から見ることができると思います...どうすれば空間の知覚を取り除くことができますか？

1つの解決策は、チェックボックスとラベル領域を囲む背景を含めることです。カーソルを合わせると、背景も色が変わり、この領域全体が選択可能であることをさらに強調できます。 enter image description here

77
Tom R

チェックボックスの左側からラベルの右側までのすべての領域がクリック可能である必要があるというあなたの意見に同意します。これにより、クリックミスが少なくなり、タッチデバイスで役立ちます。

マウスアイコンも、クリック可能な領域全体でこれを視覚的に示します。

8
darryn.ten

http://www.w3.org/wiki/HTML/Elements/label によると、最初のシナリオは不適切であり、次のようにリストされます。

<!-- SCENARIO 1 -->
<label>
    <input type="checkbox" id="myCheckbox" />
    My Checkbox
</label>

さて、他の部分については、陰的な空間はどのように扱われるべきでしょうか？

<!-- SCENARIO 2 -->
<input type="checkbox" id="myCheckbox" />
<label for="myCheckbox">My Checkbox</label>

vs

<!-- SCENARIO 1 -->
<label>
    <input type="checkbox" id="myCheckbox" />
    My Checkbox
</label>

いくつかの書式の備考を付けて、これらを分解します

<!-- SCENARIO 2 -->
<input type="checkbox" id="myCheckbox" /><!-- implicit HTML space exists here, is outside "label" -->
<label for="myCheckbox">My Checkbox</label>

vs

<!-- SCENARIO 1 -->
<label>
    <input type="checkbox" id="myCheckbox" /><!-- implicit HTML space exists here, is inside "label" -->
    My Checkbox
</label>

チェックボックスとそのラベルテキストの間のスペースもアクティブにする必要がありますか？

シナリオ2では、チェックボックスとラベルの間にクリックできない空白が必要です。これは、暗黙のHTMLスペースが2つの要素のbetweenであるためです。 。

シナリオ1では、チェックボックスとラベルの間にクリック可能な空白が必要です。これは、暗黙的なHTMLスペースがテキストノードと隣接しているためです。入力要素。

これを実行したくない状況（ある場合）は何ですか？

正直なところ、そのような状況は思いつきません。個人的には、チェックボックスの周りの領域全体でチェックボックスを選択したい。 Tom Rからの回答 を参照してください。

今後これを防止したい場合は、次のフォームを使用してください。

<!-- SCENARIO 2 -->
<input type="checkbox" id="myCheckbox" /><label for="myCheckbox">My Checkbox</label>
<!-- non-implicit HTML space here, since the elements directly abut -->

ただし、フォーム要素には最初からパディングがあるので、周りにスペースができます。これはCSSの問題になります。

6
jcolebrand

ラベルをクリックすると、選択に関する追加情報にアクセスしたり、美的目的でマウスオーバーではなくクリック時にツールチップをインスタンス化したりするために使用されることがあります。必要でない限り、視覚的に明確に定義されていなくても、通常、クリック可能な領域を最大化することが最善のアプローチです（ボックス内のボックスは可能な限り回避するのが最善です）。

1
Shash

はい、チェックボックスとそのラベルの間のスペースはクリック可能でなければなりません。これは、ユーザーが意図的にチェックボックスまたはテキストラベルをクリックしたが、誤ってマウスをギャップに移動したために、ユーザーがその間のスペースをクリックした場合に発生します。これらのユーザーのミスを考慮し、ギャップもクリック可能にする必要があります。

チェックボックスをクリック可能にする正しい方法を示す優れた記事を次に示します。 フォームチェックボックスにラベルタグが必要な理由

1
pearso

私の意見では、はい。これは、2つの別個のアクションではなく、同じアクションを持つコントロールの継続です。

どちらのスペースをクリックしても異なるアクションが発生した場合は、これが発生したくない場所を確認できます。 （つまり、選択したラベルをクリックすると、子、同じトピックに関連する他のアイテムなど）

0
Ben