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

【问题标题】：How to have one label for multiple select boxes?如何为多个选择框设置一个标签？
【发布时间】：2013-01-31 02:46:10
【问题描述】：

我有这张登记表：

<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 执行此操作的正确方法是什么？

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

【问题讨论】：

看不出你所拥有的东西有什么问题。有什么理由让您不期待吗？
它工作正常。您有什么特别想要的吗？ jsfiddle.net/B2MrM
一种解决方法是为每个label 创建多个重复的label 元素，并使用CSS 隐藏重复项，以便只显示第一个。屏幕阅读器的标签应该仍然能够读取重复项，因为屏幕阅读器读取的是源代码而不是我们眼睛看到的输出。

标签： html

【解决方案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>

【讨论】：

不知道 aria-label 属性。非常感谢。
在这种情况下，只需使用 aria-label 就足够了。

【解决方案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>

另请注意，根据the W3Clabelled-by：

如果标签文本在屏幕上可见，作者应该使用aria-labelledby，不应该使用aria-label。仅当界面无法在屏幕上显示可见标签时才使用aria-label。在计算可访问名称属性时，用户代理优先于 aria-labelledby 而不是 aria-label。

【讨论】：

【解决方案3】：

您不能将label 元素与多个控件相关联。这在definition of label 中有描述。

您可以为每个 select 元素赋予自己的标签。

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

【讨论】：

IMO 有问题的可用性建议，并不是真正解决问题的方法，只是一种解决方法。

【解决方案4】：

没有正确的方法；标签指的是一个元素。只需将其指向第一个即可。

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

如果你喜欢语义，你也可以使用特别风格的<fieldset>，但我认为这有点矫枉过正。 <input type="date"> 可能是这里最好的选择，因为它是一个可以被你的<label> 指向的元素，它更具语义性，并且如果你实现一个好的日期选择器来配合它，它可能会更友好。

如果您想坚持使用<select>s，请尝试为每个人分配一个title 属性以实现可访问性。

【讨论】：

【解决方案5】：

尝试改进@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 的“Using the aria-labelledby attribute”示例 1。

【讨论】：

【解决方案6】：

HTML5 的input type="date" 也可能很有用，特别是如果您使用月/日/年选择框来限制日期选择的可能性。此输入元素支持min 和max 日期属性，因此您可以应用您的限制。旧版浏览器不支持它，但我看到智能 cookie 使用 jQueryUI's datepicker 作为 shim（通过使用 capabilities detection 来确定 type="date" 支持，然后仅在原生不支持的情况下加载并调用 datepicker） .

【讨论】：