RE: Form Labels and Accessibility

Thanks. I will investigate that option. I main concern is using this type of technique for accessibility or if there is a better technique I should use.

Thanks,
Wendee


-----Original Message-----
From: Jon Gunderson [mailto:jongund@uiuc.edu]
Sent: Tue 5/29/2007 4:10 PM
To: James Golden; Wendee Fiorillo; w3c-wai-ig@w3.org
Subject: RE: Form Labels and Accessibility
 
Weende,
You may want to use absolute positioning, since that will probably have better cross browser support.

.hidden {
  position: absolute;
  left: -200em;
  top: -20em;
}



---- Original message ----
>Date: Tue, 29 May 2007 12:52:59 -0400
>From: "James Golden" <james@thekarchergroup.com>  
>Subject: RE: Form Labels and Accessibility  
>To: "Wendee Fiorillo" <wendee.fiorillo@bigbad.com>, <w3c-wai-ig@w3.org>
>
>   Wendee,
>
>   Not sure if this is the right list or not, but I
>   develop and I think the technique is just fine. Make
>   sure the design is very obvious that the two are
>   grouped otherwise it is better usability to have it.
>
>    
>
>   James J. Golden
>
>   ----------------------------------------------------
>
>   From: w3c-wai-ig-request@w3.org
>   [mailto:w3c-wai-ig-request@w3.org] On Behalf Of
>   Wendee Fiorillo
>   Sent: Tuesday, May 29, 2007 11:26 AM
>   To: w3c-wai-ig@w3.org
>   Subject: Form Labels and Accessibility
>
>    
>
>    
>
>   Hello,
>
>   First, hope I sent this to the correct group. If
>   not, could you let me know where to direct my
>   question? Thanks.
>
>   And now my question. I am working on a few detailed
>   forms and I am wondering the best way to have a
>   radio button followed by an input. Below is what I
>   currently have.
>
>   <label><input type="checkbox" name="referral"
>   value="Newspaper" /> Newspaper</label>
>   <label><span class="hidden">Enter newspaper
>   name</span> <input type="text" size="30"
>   name="newspaper_referral" /></label>
>
>   And for reference, the CSS for the class="hidden"
>   is:
>   .hidden {text-indent: -999em;}
>
>   Essentially, using CSS I have the above visually
>   grouped together and I do not want the second label
>   "Enter newspaper name" to be displayed in most
>   graphical web browsers that support current web
>   standards (FF, IE, Safari, etc.) so it displays as
>   (radio button) Newspaper [text field]. I have
>   included the "Enter newspaper name" and is
>   positioned off the screen but is accessible to
>   screen readers and other technologies that do not
>   support CSS. Is this method acceptable or is there a
>   better way/technique to achieve my goal?
>
>   Thanks,
>   Wendee
Jon Gunderson, Ph.D.
Director of IT Accessibility Services (CITES)
and 
Coordinator of Assistive Communication and Information Technology (DRES)

WWW: http://www.cita.uiuc.edu/
WWW: https://netfiles.uiuc.edu/jongund/www/