html - 两个输入的单个标签

Question

我目前正在向表单添加一些日期输入。我有一个“开始日期”和“结束日期”输入，但只想对两个输入使用一个标签(“日期”)。

这有可能吗？可访问性问题是什么？

我目前的想法是显示一个标签“日期”，然后为屏幕阅读器等的每个输入设置两个隐藏标签。这是要走的路吗？有没有大型网站做这种事情的例子(如果可能，政府网站)？

这是一个可能由政府机构使用的项目，因此在遵守可访问性方面有严格的规定。

Answer 1

在这种情况下，我认为最好的标记是将输入包装在 fieldset 中，对“日期”使用 legend，使用 labels 用于 inputs 并隐藏标签:

HTML

<fieldset>
<legend>Dates</legend>
<label for="startdate">Start Date</label>
<input type="text" name="startdate" id="startdate" placeholder="Start Date">
<label for="enddate">End Date</label>
<input type="text" name="enddate" id="enddate" placeholder="End Date">
</fieldset>

CSS

fieldset {
  border: none;
}
label {
  margin-left: -999em;
}
input {
  display: block;
}

Fiddle here

另见:WCAG 2, H71: Providing a description for groups of form controls using fieldset and legend elements