html - 如何为多个选择框设置一个标签？

Question

我有这张登记表:

<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> 

如您所见，用户将在不同的选择框上选择月、日和年，但是，所有三个标签应该只存在一个标签。

使用 HTML 执行此操作的正确方法是什么？

更新: 我担心我们在开发类似上面的代码时可能遇到的可访问性问题。我的意思是，盲人用户应该能够听到每个标签才能填写此表格...

Answer 1

为所有三个输入框使用一个标签的问题在于，视力不佳的用户不会知道焦点在三个框中的哪一个，因为在每种情况下都会读出相同的文本。有许多可能的方法。也许最安全的方法是为每个盒子都贴上标签，但将这些标签隐藏到视口(viewport)的左侧。另一种应该可行但我尚未测试的可能性是:

<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>