E-mail List Archives
Thread: RE: Field labels
Number of posts in this thread: 7 (In chronological order)
From: julian.rickards
Date: Wed, Mar 10 2004 6:56AM
Subject: RE: Field labels
No previous message | Next message →
>
From: Jon Gunderson
Date: Wed, Mar 10 2004 7:22AM
Subject: Re: Field labels
← Previous message | Next message →
You can make a label invisible using CSS.
<label style="visibility: hidden">Address 2: <input name="address2" type="text"></label>
Jon
---- Original message ----
>Date: Wed, 10 Mar 2004 10:26:27 -0000
>From: "Allison Tynan" < = EMAIL ADDRESS REMOVED = >
>Subject: Field labels
>To: < = EMAIL ADDRESS REMOVED = >
>
>Hello everyone
>
>Is it possible to attach invisible field labels? Say for example you have
>three fields for an address, instead of labelling each field Address 1,
>Address 2 etc, is it possible to provide an invisible label for the second
>two fields?
>
>Many thanks
>Allison Tynan
>System Concepts Limited
>2 Savoy Court
>Strand
>London
>WC2R 0EZ
>
>
>
>
>----
>To subscribe, unsubscribe, suspend, or view list archives,
>visit http://www.webaim.org/discussion/
>
Jon Gunderson, Ph.D., ATP
Coordinator of Assistive Communication and Information Technology
Division of Rehabilitation - Education Services
MC-574
College of Applied Life Studies
University of Illinois at Urbana/Champaign
1207 S. Oak Street, Champaign, IL 61820
Voice: (217) 244-5870
Fax: (217) 333-0248
E-mail: = EMAIL ADDRESS REMOVED =
WWW: http://cita.rehab.uiuc.edu/
WWW: http://www.staff.uiuc.edu/~jongund
----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/
From: julian.rickards
Date: Wed, Mar 10 2004 7:30AM
Subject: RE: Field labels
← Previous message | Next message →
>
From: Tim Harshbarger
Date: Wed, Mar 10 2004 7:32AM
Subject: RE: Field labels
← Previous message | Next message →
Allison and Julian,
Another method for labeling fields is the title attribute.
<input type="text" name="address2" title="Address 2" />
In this case, a non-visual browser, such as a screen reader, would provide
the title attribute information. -- at least, that is my understanding.
However, for grouping a number of logically related fields, I think Julian
is right to suggest using the fieldset element.
The question is would something along the lines of:
<fieldset>
<legend>Expiration Date</legend>
<input type="text" name="month" />
/
<input type="text" name="year" />
</fieldset>
Provide enough information to the user to figure out what they need to
enter.
Perhaps, with the right visual cues, someone looking at the page may know
what to enter.
I am uncertain that an auditory rendering of the visual cues may assist
someone using a screen reader though.
In JAWS, it would be rendered like this -- "Expiration Date edit".
In this case, I think it helps to have some kind of label to indicate that
all you want is the month. Either that or I would suggest using a combobox
with a list of the months. That may also clarify what information is being
requested.
Tim
From: Sandy Clark
Date: Wed, Mar 10 2004 7:49AM
Subject: RE: Field labels
← Previous message | Next message →
A better way is to use the following so that Jaws, and other screen readers
which apply stylesheets will actually read.
.hidden{
height: 0; /* show any descriptive text in a link only in speech
browsers, hide in all visual browsers. */
overflow: hidden;
position: absolute; /* for the benefit of IE5 Mac */
width: 0;
}
From: Jon Gunderson
Date: Wed, Mar 10 2004 7:52AM
Subject: RE: Field labels
← Previous message | Next message →
I think it is also important to remember that not all accessibility considerations are centered on screen reader compatibility. People with low vision or people with learning disabilities also need proper labeling.
Jon
---- Original message ----
>Date: Wed, 10 Mar 2004 08:24:24 -0600
>From: Tim Harshbarger < = EMAIL ADDRESS REMOVED = >
>Subject: RE: Field labels
>To: "' = EMAIL ADDRESS REMOVED = '" < = EMAIL ADDRESS REMOVED = >
>
>Allison and Julian,
>
>Another method for labeling fields is the title attribute.
>
><input type="text" name="address2" title="Address 2" />
>
>In this case, a non-visual browser, such as a screen reader, would provide
>the title attribute information. -- at least, that is my understanding.
>
>However, for grouping a number of logically related fields, I think Julian
>is right to suggest using the fieldset element.
>
>The question is would something along the lines of:
>
><fieldset>
> <legend>Expiration Date</legend>
> <input type="text" name="month" />
> /
> <input type="text" name="year" />
></fieldset>
>
>Provide enough information to the user to figure out what they need to
>enter.
>
>Perhaps, with the right visual cues, someone looking at the page may know
>what to enter.
>
>I am uncertain that an auditory rendering of the visual cues may assist
>someone using a screen reader though.
>
>In JAWS, it would be rendered like this -- "Expiration Date edit".
>
>In this case, I think it helps to have some kind of label to indicate that
>all you want is the month. Either that or I would suggest using a combobox
>with a list of the months. That may also clarify what information is being
>requested.
>
>Tim
>
From: Jared Smith
Date: Wed, Mar 10 2004 10:11AM
Subject: Re: Field labels
← Previous message | No next message
We've found that Window Eyes does not read the label if the height
and width are set to 0 pixels. I'd suggest leaving height and width
to 1 pixel to catch this user agent. The following seems to work
(we're still testing):
.hidden-label
{
position:absolute;
left:0px
top:-100px;
width:1px;
height:1px;
overflow:hidden;
}
This virtually hides the label (it takes up one pixel) and moves it
100 pixels above the top of the page. If styles are turned off, the
label will appear in the normal context of the page.
Jared Smith
WebAIM (Web Accessibility In Mind)
Center for Persons with Disabilities
Utah State University
***************
On Wednesday, March 10, 2004 you sent:
> A better way is to use the following so that Jaws, and other screen readers
> which apply stylesheets will actually read.
> .hidden{
> height: 0; /* show any descriptive text in a link only in speech
> browsers, hide in all visual browsers. */
> overflow: hidden;
> position: absolute; /* for the benefit of IE5 Mac */
> width: 0;
> }
----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/