html - 2つのフォーム入力を持つ1つのHTMLラベル

Question

1つのラベルを2つのフォーム入力、たとえば2つの入力「ExpirationMonth」と「ExpirationYear」のラベルに「ExpirationDate」と関連付けたい場合、これを行うための最良のセマンティックアプローチは何ですか？

Answer 1

ラベルは、定義上、単一のフィールドのラベルであるため、ラベルを複数の入力フィールドに関連付ける方法はありません。要素を使用する理由は、labelこのような単純な対応に基づいているため、2つのフィールドで同時に使用しても意味がありません。

一方では2つの入力フィールドが必要であり、他方ではWCAG 2.0（label入力ボックスのマークアップが必須となるH44）に準拠する必要がある場合は、ボックスごとに個別のラベルを付ける必要があります。

実際には、月/年の入力用に単一のフィールドを用意することをお勧めします。そうすれば、この問題は発生しません。（ほとんどのユーザーは、「10」と入力して次の入力ボックスをクリックするか、Tabキーを押すよりも、「10/12」と入力する方が自然だと思いますが、ほとんどのユーザーは入力しません。その後、「12」と入力します。 。また、あるフィールドから別のフィールドへの自動タブ操作を試みると、混乱が生じます。）

Answer 2

title属性とaria-labelledby属性を使用する解決策があります。

次に例を示します。

<span id="bday">Birthday</span>:
<select name="bday_month" title="Month of Birth" aria-labelledby="bday">
<option 1>January
  ...
<option 12>December
</select>
<select name="bday_day" title="Day of Birth" aria-labelledby="bday">
<option 1>1
  ...
<option 31>31
</select>

これは、 http： //wave.webaim.org/アクセシビリティチェッカーを「通過」します。