RE: a single label where multiple fields follow

Hi Antony: Comments in line marked with <jt>

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

So with this in mind, still assuming visual design dictates they are
multiple inputs and using the scenario of date of birth (3 inputs,
dd,mm,yyyy) or credit card (4 inputs), would you consider it better to have 
 
1. a label for each input and for the additional inputs to position there
labels off screen not using "hidden" in the class namimg convention (not
sure if this would always inform the user the data is split across field
when they encounter the first input)

<jt> Not clear what you intended, But you cant put the label "date of birth
(dd,mm,yyyy)" and any single input - it does not make sense. I would
probably use "day of birth", "Month of birth", and "year of birth" for the
three hidden  labels.</jt>
or
 
2. having a label for the first inputs and titles for the subsequent inputs
(I seem to recall reading that  it is not advised to use both, but not sure)
 
<jt>Again, I can't imagine a workable visible label for the first field. It
is ill advised to use both title and label on any one control. Screen
readers get confused - it seems. Use title or label. Text of title attribute
could be same as above.</jt>

or
 
3. not have a label for the first input but have titles for all inputs (only
where multiple inputs apply, all remaing 1 to 1 ratio would still use
labels)
 
<jt> I think I have answered this - in both the above cases. Use hidden
labels or title attributes in all cases where one visual label covers more
than one control. ... What am I missing? </jt>

or 
 
4. there is a  better way
 
hope I have been clear on the scenrios but it confuses me which to go for
 
Antony
----- Original Message ----
From: Jim Thatcher <jim@jimthatcher.com>
To: Michael S Elledge <elledge@msu.edu>
Cc: w3c-wai-ig@w3.org
Sent: Thursday, 21 September, 2006 4:03:41 PM
Subject: 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 19:11:43 UTC