9

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

是否有可能做到这一点？可访问性问题是什么？

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

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

4

3 回答 3

7

在这种情况下，我认为最好的标记是将输入包装在 a 中fieldset，将 alegend用于“日期”，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：使用字段集和图例元素为表单控件组提供描述

于 2013-02-14T19:01:27.987 回答
3

我认为您最好的选择是在每个输入中包含一个标签。然后对于您不想实际显示在页面上的标签，可以简单地使用 CSS 通过

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

...或类似的东西

于 2013-02-13T13:00:24.597 回答
1

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

<label for="x">x name</label><input name="x"/>
<label for="y">y name</label><input name="y"/>
于 2013-02-13T12:58:08.013 回答