Multiple input selects on one line, no labels?

[wbtenor]

In a form I'm working with, I'm struggling with the proper code for usability vs. accessibility. I'm actually running into this a lot more now that I'm concentrating on accessibility. There are lots of times that I'd like multiple inputs on one line without any label, because visually it's pretty obvious. However, I was under the impression that for accessibility all form elements needed labels.

I can style whatever layout with CSS, but I'm looking at the right code first. I could hide the labels with CSS, but is that OK for screen readers? Should I just omit the labels? Should I enclose the whole thing in a fieldset (as in the example) or would a div work better? Any help is greatly appreciated!

An example easy to use visual format is simply:
Time of appointment: | [HOURS][MINUTES] to [HOURS][MINUTES] +am-pm

<fieldset id="time">
<legend>Time of appointment</legend> 
  <select name="start_hour">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    ...etc
  </select>

  <label for="start_minute">Start minute</label>
  <select name="start_minute">
    <option value="00">00</option>
    <option value="05">05</option>
    <option value="10">10</option>
    ...etc
  </select>

  to

  <label for="end_hour">End hour</label>
  <select name="end_hour">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    ...etc
  </select>

  <label for="end_minute">End minute</label>
  <select name="end_minute">
    <option value="00">00</option>
    <option value="05">05</option>
    <option value="10">10</option>
    ...etc
  </select>

  <input type="radio" name="ampm" id="ampm_am" value="am" checked="checked" />
  <input type="radio" name="ampm" id="ampm_pm" value="pm" />
</fieldset>

[LinhGB]

Put each <label><select> combo in div.form-block and float:left them with appropiate widths and margins. Have an outer div that applies clearing to the whole lot (like the clearfix trick from positioniseverything for instance).

[zcorpan]

First, for points to an id, not a name. id and name don't have to be the same. In fact, in the case of a radio button group, they have to be different:

<fieldset>
 <legend>Sex</legend>
 <input id="sex-male" type="radio" name="sex" value="male">
 <label for="sex-male">Male</label>
 <input id="sex-female" type="radio" name="sex" value="female">
 <label for="sex-female">Female</label>
</fieldset>

You could use implicit labels, although IE6 users won't be able to click the label:

<fieldset>
 <legend>Sex</legend>
 <label><input type="radio" name="sex" value="male"> Male</label>
 <label><input type="radio" name="sex" value="female"> Female</label>
</fieldset>

Screen readers will, according to some testing, read labels even if they are hidden. You could use the title="" attribute instead of a label, since screen readers will fall back to the title attribute if there is no label, AFAIK.

  <select name="start_minute" title="Start minute">
    <option>00</option>
    <option>05</option>
    <option>10</option>
    ...etc
  </select>

(Note that value defaults to the contents of the option.)

[tetsuo shima]

rep++ to Simon. Always on top of things. Not relevant to this thread but I couldn't help.

[wbtenor]

Thanks for the great tips. Should I put each radioset in a fieldset? If not, what is the proper way to label the group of radio buttons?

ie...SEX [+Male -Female]

[zcorpan]

Should I put each radioset in a fieldset?

Yes. This is exactly what fieldsets were designed for; grouping related form controls.