Single label for two inputs

▼魔方 西西 提交于 2021-01-26 06:02:08

问题


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.


回答1:


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;
}

Fiddle here

Also see: WCAG 2, H71: Providing a description for groups of form controls using fieldset and legend elements




回答2:


I think your best bet would to be to include a label with each input. Then for the label that you don't want to actually display on the page can simply be set off page using CSS via

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

...or something similar




回答3:


The issue here is that you can only specify one for for each label. I would imagine, for accessibility purposes it would be best to show two labels one for each date. In this way anyone using a screen reader, etc. will get a valid label for each input.

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


来源:https://stackoverflow.com/questions/14854062/single-label-for-two-inputs

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!