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 <pauldcollins@gmail.com>
Date: Thu, 21 Sep 2006 16:34:03 +0100
Message-ID: <fa62db570609210834r445107aap23305f4503de846@mail.gmail.com>
To: jim@jimthatcher.com
Cc: "Michael S Elledge" <elledge@msu.edu>, w3c-wai-ig@w3.org

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:34:14 GMT

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