Single label for two inputs

Question

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.

Marinmarina

How do you define 'use'? Do you mean clicking the label should focus both fields (as with the for attribute)? – Compel

Well the for attribute will need to be set to allow assistive technology to inform the user of the correct input etc. – Marinmarina

Answer 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

Aquanaut

There shouldn't be a need to use a visibly hidden <label> nowadays if you just use aria-label. – Wandis

Answer 2

One of the ways that W3 recommends doing this is via putting aria-label attributes on the <input>s themselves. This avoids needing a <label> element. This approach should only be used when the input has enough content for sighted users to not need a label (like a phone number field that's split across multiple <input>s).

Granduncle

Answer 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"/>

Danged

Do you suggest using hidden labels that are just for screen readers? – Marinmarina

not 100% sure what the recommendations are on hidden labels. I wouldn't be surprised if some readers wouldn't read hidden values, I suppose this would depend on your definition of hidden also! – Danged

This is the most accessibility-friendly approach, and avoids creating the problem in the first place. It is conceptually simple and understandable, which is an important accessibility feature too. People with cognitive difficulties need to have a simple and understandable association between a text that explains expected input and a control for the actual input. For this reason, labels should not be hidden in visual rendering. – Passkey

Answer 4

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

Cantonment

Surely Display:none would be better than position:absolute ? – Marinmarina

Really? This is news to me. Do you have any examples? – Marinmarina

@Marinmarina - Here you go: css-tricks.com/places-its-tempting-to-use-display-none-but-dont – Cantonment

The reader (or the person using the reader) would get confused if you had elements that are shown dynamically. As it would read all the hidden elements whether they were applicable or not. – Danged

Wow. Thanks, guess I might need to re-think this a little bit. – Marinmarina

Im going to add this additional link as reference for others: alistapart.com/article/now-you-see-me – Marinmarina

Isn't the point of display: none; to hide it? Surely if you don't want a sighted person to see it, you don't want a screen reader to read it either. It seems like an unnecessary overreach in accessibility to not properly hide something you want hidden, because... you don't want it hidden for certain people? That makes no sense. – Vibrato