9

I have on this check in form:

<label>Check in date </label>
<select id="day">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select> 
<select id="month">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select> 
<select id="year">
  <option value="1">2012</option>
  <option value="2">2013</option>
</select> 

As you can see, the user will choose the month, the day and the year on different select boxes, however, only one label should exist for all three.

What would be the proper way to do this with HTML ?

Update: I'm concerned with the accessibility hit that we may have on developing something like the code above. I mean, a blind user should be able to listen each label in order to fill this form...

3
  • Don't see a problem with what you have. Any reason why you would expect otherwise? Aug 28, 2012 at 17:43
  • its working fine.IS there anything specific that you want..? jsfiddle.net/B2MrM Aug 28, 2012 at 17:45
  • A workaround can be to create multiple diuplicate label elements for each select and use CSS to hide the duplicates so only the first one is displayed. Label for screenreaders should still be able to read the duplicates as the screenreaders read the source code not the output our eyes see.
    – Martin
    Apr 22, 2021 at 12:18

7 Answers 7

14

The problem with using one label for all three input boxes is that an non-sighted user is not going to know which of three boxes the focus is in because the same text will be read out in each case. There's a number of approaches possible. Maybe the safest is to have a label for each box, but hide those labels off to the left side of the viewport. Another possibility which ought to work, but I haven't tested would be this:

<fieldset>
    <legend>Check in date</legend>
    <select id="day" aria-label="day">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select> 
    <select id="month" aria-label="month">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select> 
    <select id="year" aria-label="year">
      <option value="1">2012</option>
      <option value="2">2013</option>
    </select>
</fieldset> 
2
  • Didn't know about aria-label property. Thanks a lot.
    – MEM
    Aug 28, 2012 at 19:48
  • 1
    Simply having aria-label may be enough for this scenario, here. Feb 10, 2014 at 14:03
8

Following with the answer from @Alohci, you can also use aria-labelledby and reverse the naming reference (which I think is a bit closer to the convention you were looking for):

<label id="date">Check in date</label>
<select aria-labelledby="date">
    <!-- ... -->
</select> 
<select aria-labelledby="date">
    <!-- ... -->
</select> 
<select aria-labelledby="date">
    <!-- ... -->
</select>

Also note, as per the W3C on labelled-by:

If the label text is visible on screen, authors SHOULD use aria-labelledby and SHOULD NOT use aria-label. Use aria-label only if the interface is such that it is not possible to have a visible label on the screen. User agents give precedence to aria-labelledby over aria-label when computing the accessible name property.

4

You cannot associate a label element with more than one control. This is described in the definition of label.

You could give each select element its own label.

A better approach is to have a single text input field for a date. Then there is no problem with label. It means more work, since you have to parse the data server-side, and you should also parse it client-side (for checks, so that the user can immediately be informed of problems). But it is better usability (surely it is faster to type in a date than to use three clumsy dropdowns) and better accessibility. You need to decide on a date format and clearly tell the user what the expected format is.

1
  • 3
    Questionable usability advice IMO, and not really a solution to the problem, just a way around it. Mar 11, 2015 at 20:20
1

There is no proper way; a label refers to one element. Just point it to the first one.

<label for="day">Check in date </label>

You could also use a specifically-styled <fieldset> if you like semantics, but I think that's a bit overkill. An <input type="date"> is probably the best option here, as it is one element that can be pointed to by your <label>, is more semantic, and can be somewhat friendlier if you implement a good date picker to go along with it.

If you want to stick with the <select>s, try giving each one a title attribute for accessibility.

1

Trying to improve @Bracketworks answer:

<label id="date">Check in date</label>
<label for="day" id="label_day">Day</label>
<select id="day" aria-labelledby="date label_day">
    <!-- ... -->
</select> 
<label for="month" id="label_month">Month</label>
<select id="month" aria-labelledby="date label_month">
    <!-- ... -->
</select> 
<label for="year" id="label_year">Year</label>
<select id="year" aria-labelledby="date label_year">
    <!-- ... -->
</select>

See example 1 of MDN's "Using the aria-labelledby attribute".

0

HTML5's input type="date" might be useful too, particularly if you're using month/day/year select boxes as a way to limit date selection possibilities. This input element supports min and max date attributes, so you can apply your limitations. It's not supported by older browsers, but I've seen smart cookies use jQueryUI's datepicker as a shim (by using capabilities detection to determine type="date" support, then loading in and invoking the datepicker only if it isn't supported natively).

0

from: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

"...you can nest the 'input' (or 'select' in this case) directly inside the 'label', in which case the for and id attributes are not needed because the association is implicit"

<label>Check in date 
    <select id="day">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select> 
    <select id="month">
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
     <option value="4">4</option>
    </select> 
    <select id="year">
     <option value="1">2012</option>
     <option value="2">2013</option>
    </select> 
 </label>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.