我目前正在向表单添加一些日期输入.我有一个’开始日期’和’结束日期’输入,但只想为两个输入使用单个标签(‘日期’).
是否有可能做到这一点？可访问性问题有哪些？
我目前的想法是有一个标签’日期’,然后显示为屏幕阅读器的每个输入有两个隐藏标签.这是要走的路吗？有没有大型网站做这种事情的例子(政府网站,如果可能的话)？
这是一个可能是政府机构用户的项目,因此对其遵守可访问性有严格的规定.
解决方法
在这种情况下,我认为最好的标记是将输入包装在字段集中,使用图例“日期”,使用两个输入的标签并隐藏标签：
<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: Providing a description for groups of form controls using fieldset and legend elements
