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

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

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

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

Answer 2

接下来是@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计算访问的名称属性时.

Answer 3

您不能将一个label元素与多个控件关联。这在的定义label中进行了描述。

您可以为每个select元素指定自己的标签。

更好的方法是使用单个日期文本输入字段。那么就没有问题了label。这意味着更多的工作，因为您必须在服务器端解析数据，并且还应该在客户端解析它（用于检查，以便用户可以立即得知问题）。但它具有更好的可用性（输入日期肯定比使用三个笨拙的下拉菜单更快）和更好的可访问性。您需要决定日期格式并清楚地告诉用户期望的格式是什么。