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

Re: a single label where multiple fields follow

From: Paul Collins <paul@pokelondon.com>
Date: Thu, 21 Sep 2006 16:42:03 +0100
Message-ID: <01bf01c6dd94$7f4f0060$a318a8c0@dev2>
To: "Paul Collins" <pauldcollins@gmail.com>, <jim@jimthatcher.com>
Cc: "Michael S Elledge" <elledge@msu.edu>, <w3c-wai-ig@w3.org>
There was a typo there too, they should both say "firstField"
  ----- Original Message ----- 
  From: Paul Collins 
  To: jim@jimthatcher.com 
  Cc: Michael S Elledge ; w3c-wai-ig@w3.org 
  Sent: Thursday, September 21, 2006 4:34 PM
  Subject: Re: a single label where multiple fields follow



  Yes, that was my mistake thanks Jim and I have learnt something today :)

  Curious to know and I may be wrong again here, what are the
  implications of applying a label that is associated with the first
  input only, so long as the inputs are inside a fieldset together?

  EG:

  <fieldset>
  <label for="firstField">Select your choice</label>
  <input type="text" id="firstChoice">
  <input type="text">
  <input type="text">
  </fieldset>

  Hope I am not going down the wrong path here again :)




  On 21/09/06, Jim Thatcher <jim@jimthatcher.com> wrote:
  >
  > 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.
  > >
  > >
  >
  >
  >
  >
  >
  >
  >
  >


  -- 
  -----------------------------------------------

  Paul Collins
  Ph: +44 (0) 793 9038 249 (UK)
  pauldcollins@gmail.com
Received on Thursday, 21 September 2006 15:42:25 GMT

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