Re: a single label where multiple fields follow

• From: Michael S Elledge <elledge@msu.edu>
• Date: Thu, 21 Sep 2006 10:42:19 -0400
• To: Terrence Wood <tdw@funkive.com>
• CC: w3c-wai-ig@w3.org, Antony Tennant <antonytennant@yahoo.co.uk>
• Message-ID: <4512A4CB.3050108@msu.edu>

I suspect I may get some critical responses...
:-)

however, where the input fields are self-evident to sighted users (such 
as for month/day/year drop downs) but still useful for screen reader 
users, you can consider moving labels off screen using CSS. That way you 
have the benefit of providing additional context without relying solely 
on title tags or causing unnecessary screen clutter:

            <fieldset>
                <legend>Dates for Stay:</legend>
                Check in:
                <label for="CheckInMonth" class="hidden">Check in month: 
</label><br />
                <select name="monIn" id="CheckInMonth" title="Check in 
Month">
                    <option value="1">Jan</option>
                    <option value="2">Feb</option>
                </select>

                <label for="CheckInDay" class="hidden">Check in day: 
</label>
                <select name="dayIn" id="CheckInDay" title="Check in Day">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="25">25</option>
                </select>

                <label for="CheckInYear" class="hidden">Check in year: 
</label>
                <select name="yearIn" id="CheckInYear" title="Check in 
Year">
                    <option value="2006">2006</option>
                    <option value="2007">2007</option>
                </select><br /><br />
               
                Check out: <br />
                <label for="CheckOutMonth" class="hidden">Check out 
month: </label>
                <select name="monOut" id="CheckOutMonth" title="Check 
Out Month">
                    <option value="1">Jan</option>
                    <option value="2">Feb</option>
                </select>
              
                <label for="CheckOutDay" class="hidden">Check out day: 
</label>
                <select name="dayOut" id="CheckOutDay" title="Check Out 
Day">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="27">27</option>
                </select>
               
                <label for="CheckOutYear" class="hidden">Check out year: 
</label>
                <select name="yearOut" id="CheckOutYear" title="Check 
Out Year">
                    <option value="2006">2006</option>
                    <option value="2007">2007</option>
                </select><br />
            </fieldset>

.hidden {
    position: absolute;
    left: -500px;
    top: -500px;
}

Mike

Terrence Wood wrote:
>
>
> On 22/09/2006, at 12:43 AM, Antony Tennant wrote:
>> I would like to get some opinions on the best practise for assigning 
>> <label for""> to inputs where there are multiple inputs
>
> Labels relate to one control only, however, a control can have 
> multiple labels.
>
> Group related controls together using fieldset and legend.
>
> Telephone Example (inputs omitted for brevity)
>
> <fieldset><legend>Telephone number</legend>
> <label for="countrycode">...
> <label for="areacode">...
> <label for="number">...
> </fieldset>
>
>
>
> kind regards
> Terrence Wood.
>
>

Received on Thursday, 21 September 2006 14:42:37 UTC