WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: RE: Field labels

for

Number of posts in this thread: 7 (In chronological order)

From: julian.rickards@ndm.gov.on.ca
Date: Wed, Mar 10 2004 6:56AM
Subject: RE: Field labels
No previous message | Next message →

> -----Original Message-----
> From: Allison Tynan [mailto: = EMAIL ADDRESS REMOVED = ]

> 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?

This is an interesting question that I too would like resolved. My version
of the question would be, can a label apply to multiple (but logically
related) fields. For example, I have a form where the user may select a
month and year separately (in a sense, not unlike e-commerce forms where you
specify the month and year of your credit card expiry date). Can a single
label be used to apply to both fields or must each field have its own label?

I am familiar with the <fieldset> tag and maybe that is the one to be used
but I have never been very certain as to how to use it or when to use it.

---------------------------------------------------------
Julian Rickards
Digital Publications Distribution Coordinator
Publications Services Section
Ontario Ministry of Northern Development and Mines
Phone: (705) 670-5608
Fax: (705) 670-5690



----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/


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@ndm.gov.on.ca
Date: Wed, Mar 10 2004 7:30AM
Subject: RE: Field labels
← Previous message | Next message →

> -----Original Message-----
> From: Jon Gunderson

> You can make a label invisible using CSS.
>
> <label style="visibility: hidden">Address 2: <input
> name="address2" type="text"></label>

Doesn't this create the same problem as the skip nav links? If you hide
them, then JAWS users can't see them either which means that you might as
well not bother using the label.

---------------------------------------------------------
Julian Rickards
Digital Publications Distribution Coordinator
Publications Services Section
Ontario Ministry of Northern Development and Mines
Phone: (705) 670-5608
Fax: (705) 670-5690



----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/


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
-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Wednesday, March 10, 2004 7:46 AM
To: = EMAIL ADDRESS REMOVED =
Subject: RE: Field labels


> -----Original Message-----
> From: Allison Tynan [mailto: = EMAIL ADDRESS REMOVED = ]

> 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?

This is an interesting question that I too would like resolved. My version
of the question would be, can a label apply to multiple (but logically
related) fields. For example, I have a form where the user may select a
month and year separately (in a sense, not unlike e-commerce forms where you
specify the month and year of your credit card expiry date). Can a single
label be used to apply to both fields or must each field have its own label?

I am familiar with the <fieldset> tag and maybe that is the one to be used
but I have never been very certain as to how to use it or when to use it.

---------------------------------------------------------
Julian Rickards
Digital Publications Distribution Coordinator
Publications Services Section
Ontario Ministry of Northern Development and Mines
Phone: (705) 670-5608
Fax: (705) 670-5690



----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/


----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/


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;
}

-----Original Message-----
From: Jon Gunderson [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Wednesday, March 10, 2004 9:13 AM
To: = EMAIL ADDRESS REMOVED =
Subject: Re: Field labels

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/




----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/


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
>-----Original Message-----
>From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ]
>Sent: Wednesday, March 10, 2004 7:46 AM
>To: = EMAIL ADDRESS REMOVED =
>Subject: RE: Field labels
>
>
>> -----Original Message-----
>> From: Allison Tynan [mailto: = EMAIL ADDRESS REMOVED = ]
>
>> 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?
>
>This is an interesting question that I too would like resolved. My version
>of the question would be, can a label apply to multiple (but logically
>related) fields. For example, I have a form where the user may select a
>month and year separately (in a sense, not unlike e-commerce forms where you
>specify the month and year of your credit card expiry date). Can a single
>label be used to apply to both fields or must each field have its own label?
>
>I am familiar with the <fieldset> tag and maybe that is the one to be used
>but I have never been very certain as to how to use it or when to use it.
>
>---------------------------------------------------------
>Julian Rickards
>Digital Publications Distribution Coordinator
>Publications Services Section
>Ontario Ministry of Northern Development and Mines
>Phone: (705) 670-5608
>Fax: (705) 670-5690
>
>
>
>----
>To subscribe, unsubscribe, suspend, or view list archives,
>visit http://www.webaim.org/discussion/
>
>
>----
>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: 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/