两个输入的单标签

问题描述

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

I'm currently adding some date input to a form. I have a 'Start Date' and 'End Date' input but only want to use a single label ('Dates') for both inputs.

是否可以这样做?可访问性问题是什么?

Is it possible to do this? What are the accessibility concerns?

我目前的想法是要显示一个日期"标签，然后为屏幕阅读器等的每个输入提供两个隐藏的标签.这是要走的路吗?大型网站是否有这样做的例子(如果可能，政府网站)?

My current thinking is to have a label 'Dates' that is shown then have two hidden labels for each input for screen readers etc. Is this the way to go? Are there any examples of large websites doing this kind of thing (Government websites if possible)?

这是一个可由政府机构使用的项目，因此对它的访问要遵守严格的规则.

This is a project that may be user by a government agency so there are strict rules on it complying with accessibility.

推荐答案

在这种情况下，我认为最好的标记是将输入内容包装在fieldset中，将legend用作日期"，使用 inputs并隐藏标签:

In this case I think the best markup would be to wrap the inputs in a fieldset, use a legend for "Dates", use labels for both inputs and hide the labels:

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:提供对表单控件组的描述使用字段集和图例元素

这篇关于两个输入的单标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！