W3C home > Mailing lists > Public > w3c-wai-ig@w3.org > April to June 2007

RE: Form Labels and Accessibility

From: Wendee Fiorillo <wendee.fiorillo@bigbad.com>
Date: Tue, 29 May 2007 16:13:01 -0400
Message-ID: <69C92978993CB84AA7212C0C8B6B6B90D54728@bbmail01.bigbad.com>
To: "Jon Gunderson" <jongund@uiuc.edu>, "James Golden" <james@thekarchergroup.com>, <w3c-wai-ig@w3.org>
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.


-----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
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)
Coordinator of Assistive Communication and Information Technology (DRES)

WWW: http://www.cita.uiuc.edu/
WWW: https://netfiles.uiuc.edu/jongund/www/
Received on Tuesday, 29 May 2007 20:16:23 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 20:36:30 UTC