RE: a single label where multiple fields follow

Michael, that's a good technique too. Strange thing is that class "hidden"
could also be display:none. Turns out that screen readers ignore
display:none content, as I think they should, except when it is in a label
element!

By the way, in a previous post, I wrongly attributed code where the labele
element contained three inputs to David Dorward - it was not his, it was
Paul Collins'.

Jim
 
Accessibility Consulting: http://jimthatcher.com/
512-306-0931

-----Original Message-----
From: w3c-wai-ig-request@w3.org [mailto:w3c-wai-ig-request@w3.org] On Behalf
Of Michael S Elledge
Sent: Thursday, September 21, 2006 9:42 AM
To: Terrence Wood
Cc: w3c-wai-ig@w3.org; Antony Tennant
Subject: Re: a single label where multiple fields follow


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 15:04:19 UTC