8

私はこのチェックインフォームを持っています：

<label>Check in date </label>
<select id="day">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select> 
<select id="month">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select> 
<select id="year">
  <option value="1">2012</option>
  <option value="2">2013</option>
</select>

ご覧のとおり、ユーザーは異なる選択ボックスで月、日、年を選択しますが、3つすべてに対して1つのラベルのみが存在する必要があります。

HTMLでこれを行う適切な方法は何でしょうか？

更新：上記のコードのようなものを開発する際に発生する可能性のあるアクセシビリティへの影響が懸念されます。つまり、目の不自由なユーザーは、このフォームに記入するために各ラベルを聞くことができるはずです...

4

6 に答える 6

14

3つの入力ボックスすべてに1つのラベルを使用する場合の問題は、どちらの場合も同じテキストが読み取られるため、目の見えないユーザーが3つのボックスのどれにフォーカスがあるかわからないことです。可能なアプローチはたくさんあります。おそらく最も安全なのは、各ボックスにラベルを付けることですが、それらのラベルをビューポートの左側に非表示にします。動作するはずの別の可能性がありますが、私はテストしていません：これは次のとおりです。

<fieldset>
    <legend>Check in date</legend>
    <select id="day" aria-label="day">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select> 
    <select id="month" aria-label="month">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select> 
    <select id="year" aria-label="year">
      <option value="1">2012</option>
      <option value="2">2013</option>
    </select>
</fieldset>
于 2012-08-28T18:40:32.093 に答える
8

@Alohciからの回答に続いてaria-labelledby、名前付け参照を使用および逆にすることもできます（これは、探していた規則に少し近いと思います）。

<label id="date">Check in date</label>
<select aria-labelledby="date">
    <!-- ... -->
</select> 
<select aria-labelledby="date">
    <!-- ... -->
</select> 
<select aria-labelledby="date">
    <!-- ... -->
</select>

また、W3Cのlabelled-byとおり、次の点にも注意してください。

ラベルテキストが画面に表示されている場合、作成者はを使用する必要がaria-labelledbyあり、使用しないaria-labelでください。aria-label画面にラベルを表示できないようなインターフェースの場合にのみ使用してください。アクセス可能な名前のプロパティを計算するときは、ユーザーエージェントが優先さaria-labelledbyれます。aria-label

于 2013-01-21T05:30:04.743 に答える
4

label要素を複数のコントロールに関連付けることはできません。これは、の定義でlabel説明されています。

各select要素に独自のラベルを付けることができます。

より良いアプローチは、日付に対して単一のテキスト入力フィールドを持つことです。そうすれば問題ありませんlabel。データをサーバー側で解析する必要があるため、より多くの作業が必要になります。また、クライアント側でも解析する必要があります（チェックのために、ユーザーに問題をすぐに通知できるようにします）。ただし、使いやすさ（3つの不器用なドロップダウンを使用するよりも日付を入力する方が確実に高速です）とアクセシビリティが向上しています。日付の形式を決定し、予想される形式をユーザーに明確に伝える必要があります。

于 2012-08-28T20:00:17.380 に答える
1

適切な方法はありません。ラベルは1つの要素を参照します。最初のものを指すだけです。

<label for="day">Check in date </label>

<fieldset>セマンティクスが好きな場合は、特別なスタイルを使用することもできますが、それは少しやり過ぎだと思います。An<input type="date">は、ここでおそらく最良のオプションです。これは、が指すことができる1つの要素であり<label>、よりセマンティックであり、それに合わせて適切な日付ピッカーを実装すると、多少わかりやすくなります。

に固執したい場合は、それぞれにアクセシビリティ<select>の属性を与えてみてください。title

于 2012-08-28T17:43:26.603 に答える
1

@Bracketworksの回答を改善しようとしています：

<label id="date">Check in date</label>
<label for="day" id="label_day">Day</label>
<select id="day" aria-labelledby="date label_day">
    <!-- ... -->
</select> 
<label for="month" id="label_month">Month</label>
<select id="month" aria-labelledby="date label_month">
    <!-- ... -->
</select> 
<label for="year" id="label_year">Year</label>
<select id="year" aria-labelledby="date label_year">
    <!-- ... -->
</select>

MDNの「aria-labelledby属性の使用」の例1を参照してください。

于 2013-01-30T18:38:31.990 に答える
0

HTML5input type="date"も、特に日付選択の可能性を制限する方法として月/日/年の選択ボックスを使用している場合に役立つ可能性があります。この入力要素は日付属性をサポートしminてmaxいるため、制限を適用できます。古いブラウザではサポートされていませんが、スマートCookieがjQueryUIのdatepickerをシムとして使用しているのを見てきました（機能検出を使用してサポートを決定type="date"し、ネイティブでサポートされていない場合にのみdatepickerを読み込んで呼び出します）。

于 2013-01-30T18:46:10.613 に答える