Question

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

有可能这样做吗？有哪些可访问性问题？

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

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

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

Answer 2

我认为你最好的选择是在每个输入中加入一个标签。然后，对于您不想在页面上实际显示的标签，只需使用CSS通过

设置页面

.hide {
   position: absolute;
   left: -9999em;
 }

......或类似的东西

Answer 3

这里的问题是您只能为每个标签指定一个for。我想，为了便于访问，最好每个日期显示两个labels。这样，任何使用屏幕阅读器等的人都会获得每个输入的有效标签。

<label for="x">x name</label><input name="x"/>
<label for="y">y name</label><input name="y"/>

两个输入的单个标签

3 个答案: