web-dev-qa-db-ja.com

1つのラベル内の2つの入力フィールド

以下を考慮してください。

<label>Range from 
    <input name='min_value'/> to
    <input name='max_value' />
</label>

W3C勧告では、ラベルが正確に 1つのフォームコントロールに関連付けられていると記載されているため、これは意味的に正しいですか？

2番目の入力をクリックすると、すぐに最初の入力にフォーカスが移動しますか？これを防ぐことはできますか？

2つの入力が一緒に属していることを示すために、最小/最大入力の組み合わせをどのようにマークアップしますか？

htmlaccessibility
33
sqwk

いいえ、それは正しくありません（お気づきのとおり、labelはoneフォーム入力に正確に関連付けられているためです）。

一緒に属する入力のグループにラベルを付けるには、<fieldset>と<legend>を使用します。

<fieldset>
  <legend>Range</legend>
  <label for="min">Min</label>
  <input id="min" name="min" />

  <label for="max">Max</label>
  <input id="max" name="max" />
</fieldset>

参照：

46
David Thomas

受け入れられた答えが述べているように、それは正しくありませんが、それを行うためのより良い方法があると思います。

アクセス可能な代替手段：

オプション1（aria-label属性を使用）：

Range:
<input ... aria-label='Range start' />
<input ... aria-label='Range end' />

オプション2（非表示のlabelタグを使用）：

<label for='start'>Range start</label>
<input type='text' id='start' />

<label for='end' class='hidden'>Range end</label>
<input type='text' id='end' />

.hiddenクラスは スクリーンリーダーでのみ読み取り可能 です。

オプション3（aria-labelledby属性を使用）：

<label id='lblRange'>Range</label>
<input type='text' id='start' aria-labelledby='lblRange' />
<input type='text' id='end' aria-labelledby='lblRange' />

オプション＃1の利点：各inputには、他の提案（「to」ラベルの追加など）にはない優れた説明があります。オプション＃2と＃3はこの特定のケースには最適ではないかもしれませんが、同様のケースに言及する価値があります。

ソース： http://webaim.org/techniques/forms/advanced

15
Diego Jancic

ラベル内に2つの入力を配置するのは間違っているという多くの回答があります。これは、実際にはhtml5の誤ったステートメントです。標準では明示的に許可されています： http://www.w3.org/TR/html5/forms.html#the-label-element

For属性が指定されていないが、ラベル要素にラベル付け可能な要素の子孫がある場合、ツリー順のfirstそのような子孫はラベル要素のラベル付きコントロールです。

ラベル要素にそのラベル付きコントロール以外のインタラクティブコンテンツがある場合、それらのインタラクティブコンテンツの子孫およびそれらの子孫を対象とするイベントのラベル要素のアクティブ化動作は何もしない必要があります。

ただし、Safariはここでhtml5標準を尊重しません（iOS 11.3でテスト済み）。そのため、Safariとの互換性を望んでいる人は、ここで回避策を使用するか、Appleがブラウザを修正するまで待つ必要があります。

4
user1448926

これはどう：

<label> Range from <input name='min_value'> </label>
<label> to <input name='max_value'> </label>
3
Šime Vidas

this -によれば、ラベルはonly oneコントロールに関連付ける必要があるため、1つの入力のみを含めることができます。ラベル内に入力を置くことは、for属性を削除することを意味します（自動リンク）。

したがって、single入力をラベルに入れるか、入力forとdon 'を指すid属性を指定する必要があります。 t入力をラベルに入れます。

3
zysoft

1ラベル= 1入力!!!

LABEL内に2つの入力を配置すると、Safari（およびiPadとiPhone）では機能しません...

1
Martin Zvarík