One label, multiple controls

Hi guys!

I’m trying to figure out the right way to code this bit:


<label for="birthdate">Birthdate:</label>
            <fieldset id="birthdate">
            <input type="text" name="birthday_day" id="birthday_day" size="2" maxlength="2" value="" />
            -
            <input type="text" name="birthday_month" id="birthday_month" size="2" maxlength="2" value="" />
            -
            <input type="text" name="birthday_year" id="birthday_year" size="4" maxlength="4" value="" />
            (dd - mm - aaaa)
            </fieldset>

I can’t test it with a screen reader right now. I don’t have one available.

My question is: will it make sense to screen reader users? Will the screen reader understand that the label points to the fieldset?

I understand the use of labels with other form controls: one label for each control but this is not the case. I don’t want to label every control. One label for the entire group is the best option for me.

thx a lot for your help! :smiley:

This is how I’d tend to do it (I’m not saying it’s necessarily the best way, mind you): I have visible text for sighted users, and have css-positioned text offscreen for screen reader users where it will be picked up and correctly associated with the appropriate controls.

Birthdate:            
<fieldset id="birthdate">
  <label for="birthday_day" class="offset">Birthday Day</label>
  <input type="text" name="birthday_day" id="birthday_day" size="2" maxlength="2" value="" />

  <label for="birthday_month" class="offset">Birthday Month</label>
  <input type="text" name="birthday_month" id="birthday_month" size="2" maxlength="2" value="" />

  <label for="birthday_year" class="offset">Birthday Year</label>
  <input type="text" name="birthday_year" id="birthday_year" size="4" maxlength="4" value="" />
</fieldset>

…you need a label for each control, otherwise assistive technology will struggle with it - it will just say “edit:” and someone won’t necessarily know what they are supposed to put in each field. This method tells the assistive technology without taking up screen real estate.

Thx JackP. The offscreen text did not cross my mind.

Any more tips, folks?

I think the above is the only way to ensure that each input belongs to the overall label of “birthday”. The “for” of a label must be matched by a “form control” (like an input) however just like I can’t make myself do the “list 2000 elements to preclude forms” universal reset, I can’t make myself turn a simple single question into three simply because convention is to split dates into three sections. Esp when I have like 4 different date questions all in a row… I start calling it bloat.

I do something similar to what you have except I don’t use a fieldset for it, as fieldsets are more for grouping groups of label-inputs (I thought). I use a div, which has the disadvantage of not being a form control.

<label for=“birthdate”>Birthdate:</label>
<div class=“matchingdiv” id=“birthdate”>
<select>(these have names and ids themselves)
<options which are only two digits… />
</select>
<select>
<options which are only names of months… />
</select>
<select>
<options which are only 4-digits and don’t go lower than 1900…/>
</select>
</div>
(I have the added benefit of no Americans ever filling out such forms, so everyone filling these forms in already know all dates are always Day Month Year, never Month Day Year)
Since I can’t garentee that a screen reader or anything else will associate that div’s inputs with the label, as the div is not a form control, I use selects so that the possible answers help tell people what I’m expecting.

One can easily image someone typing in the full date on the first input in your case, and then either wondering what the hell the other two inputs are, or they realise it, and have to backtrack (never any fun). This applies even if you set the maxlength of your input to 2, 2, and 4-- you can’t assume everyone has autoTab.js or such things.

Jack P - After analyzing your coding I do agree with you. I Had to re-read this thread and edit my previous post. This is in all actuality the most efficient way for screen readers!