Question

I have a ‘time select’ form that is two select option elements, one for the hour and one for the minute (with 15 min granularity).

I only want 1 label saying ‘choose time’ as I think its obvious its hour and minute. Normally I associate a label with an input like so:

<label for="something">Label Text</label>
<input id="something" /> 

So what should I do in this case where the label relates to two elements?

Thanks

Answer 1

I’d label both inputs (hours, minutes, associated explicitly like you have), use one of the CSS techniques to hide them visually (but keep them in the DOM so they are available to AT). Then wrap everything in a fieldset and add a legend to the fieldset for “choose time”.

Like this:

<fieldset>
    <legend>Choose Time</legend>
    <label for="hour">Hour</label>
    <input id="hour" />
    <label for="minute">Minute</label>
    <input id="minute" />
</fieldset>