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>

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

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

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

4

6 回答 6

14

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

<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。这意味着更多的工作，因为您必须在服务器端解析数据，并且您还应该在客户端解析它（用于检查，以便用户可以立即被告知问题）。但它具有更好的可用性（输入日期肯定比使用三个笨拙的下拉菜单更快）和更好的可访问性。您需要确定日期格式并清楚地告诉用户预期的格式是什么。

于 2012-08-28T20:00:17.380 回答
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 回答
1

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

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

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

如果您想坚持使用<select>s，请尝试为每个title属性赋予可访问性。

于 2012-08-28T17:43:26.603 回答
0

HTML5input type="date"也可能很有用，特别是如果您使用月/日/年选择框来限制日期选择的可能性。此输入元素支持min和max日期属性，因此您可以应用您的限制。较旧的浏览器不支持它，但我看到智能 cookie 使用jQueryUI 的 datepicker作为填充程序（通过使用功能检测来确定type="date"支持，然后仅当它本身不支持时才加载并调用 datepicker）。

于 2013-01-30T18:46:10.613 回答