W3C home > Mailing lists > Public > w3c-wai-ig@w3.org > July to September 2006

Re: a single label where multiple fields follow

From: David Poehlman <david.poehlman@handsontechnologeyes.com>
Date: Fri, 22 Sep 2006 06:11:58 -0400
Message-Id: <BCAF4DB7-28CE-433B-8FFD-67F77486590C@handsontechnologeyes.com>
Cc: <jim@jimthatcher.com>, "'Antony Tennant'" <antonytennant@yahoo.co.uk>, "'Michael S Elledge'" <elledge@msu.edu>, <w3c-wai-ig@w3.org>
To: "Paul Collins" <paul@pokelondon.com>

I would say that label is required but if label would be the same for  
each control that title could be added with different content.  We  
need to keep in mind the many ppossible variants of rendering.

On Sep 22, 2006, at 5:20 AM, Paul Collins wrote:

Hi Jim,

I don't want to keep asking daft questions, but I would like to  
clarify this...

>> 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

Does this mean it is OK to not have any label associated with a  
control, provided they have a title, fieldset and legend? For example:

<fieldset>
  <legend>Date of Birth</legend>
  <input type="text" title="day of birth">
  <input type="text" title="month of birth">
  <input type="text" title="year of birth">
</fieldset>

Or is it required that we have a label for each form control?

Cheers,
Paul
   ----- Original Message -----
   From: Jim Thatcher
   To: 'Antony Tennant' ; 'Michael S Elledge'
   Cc: w3c-wai-ig@w3.org
   Sent: Thursday, September 21, 2006 8:11 PM
   Subject: 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 Friday, 22 September 2006 10:12:13 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Tuesday, 19 July 2011 18:14:25 GMT