两个输入的单个标签

Question

我目前正在向表单添加一些日期输入.我有一个'开始日期'和'结束日期'输入,但只想为两个输入使用单个标签('日期').

是否有可能做到这一点？可访问性问题有哪些？

我目前的想法是有一个标签'Dates',然后显示为屏幕阅读器的每个输入有两个隐藏标签.这是要走的路吗？有没有大型网站做这种事情的例子(政府网站,如果可能的话)？

这是一个可能是政府机构用户的项目,因此对其遵守可访问性有严格的规定.

Answer 1

在这种情况下,我认为最好的标记是将输入包装在a中fieldset,使用legendfor"Dates",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;
}

在这里小提琴

另请参阅:WCAG 2,H71:使用fieldset和legend元素提供表单控件组的说明