WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: RE: <label> element

for

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

From: Kevin Spruill
Date: Mon, Apr 01 2002 9:13AM
Subject: RE: <label> element
No previous message | Next message →

The placeholding characters aren't mentioned in Section 508 - The W3C's
WCAG recommendations, suggest using them. It's my understanding that
this was in fact the case with older AT agents, but no longer the case
as most screen readers, etc. can handle empty form/input elements - and
most users of AT devices are familiar enough with forms and their
functionality. Which is also why labels are an important
cue/confirmation as to the identity of the elements, and their place in
the flow and order of a form. Sect. 508 training these days recommends
not placing default text in the empty fields (the user would then have
to delete the text in order to fill the form - which apparently is more
of an inconvenience, than empty fields) for usability sake.

Now, as far as labels and placement:

From Section508 Universe (http://www.section508.gov) training
materials :

Use the <label> tag to give a field a context-relevant name.
Place field labels near and to the left of each field so AT reads them
consecutively, creating an auditory association between them.
Use the <tabindex> attribute to create a logical tab order to the entry
fields.

From W3C:
12.4 Associate labels explicitly with their controls. [Priority 2]
10.2 Until user agents support explicit associations between labels and
form controls, for all form controls with implicitly associated labels,
ensure that the label is properly positioned

Seems pretty straightforward either way - labels (logically) should be
placed with the form elements they refer to... within the form. As for
interpretation of the statue... how about this:

Item (n) from the Access Board states:

"When electronic forms are designed to be completed on-line, the form
shall allow people using assistive technology to access the information,
field elements, and functionality required for completion and submission
of the form, including all directions and cues."

Just my $.02...


HK


Kevin Spruill
National Library of Medicine
OCCS
= EMAIL ADDRESS REMOVED =
(301) 402-9708
(301) 402-0367 (fax)
www.nlm.nih.gov


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

From: Leo Smith
Date: Mon, Apr 01 2002 2:43PM
Subject: RE: <label> element
← Previous message | Next message →

Well, on one of my pages the form element's label is adjacent to it
(directly above), but in this instance the <form> tags cannot
encapsulate both the <label> and the form element:

<.tr valign="top">
<.td width="100%">
<.label for="quicklinks"><.img src="/images/title_quicklinks.gif"
width="165" height="25" border="0" alt="quick links"><./label>
<./td>
<./tr>
<.tr valign="top">
<.td width="100%">
<.form method="post" action="/cgi-bin/go-url.cgi">
<.select name="URL" class="homequicklinks"
id="quicklinks">
<.option value="something">something</option>
<./select>
<.input type="image" border="0"
src="/images/button_go_quicklinks.gif" width="19" height="19"
alt="go">
<./form>
<./td>
<./tr>

Is a screen reader not going to associate the label with the form
element in this instance?

Leo.


On 1 Apr 2002, at 11:13, Kevin Spruill wrote:

> Seems pretty straightforward either way - labels (logically) should be
> placed with the form elements they refer to... within the form. As for
> interpretation of the statue... how about this:



Leo Smith
Web Designer/Developer
USM Office of Publications and Marketing
University of Southern Maine
207-780-4774


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

From: Leo Smith
Date: Wed, Apr 03 2002 7:12AM
Subject: <label> element
← Previous message | No next message

I did some testing on this with JAWS 4.0 with IE 5.5 on Win 2000.

I found out the following:

If the contents of a <label> element is a graphic with appropriate alt
text, JAWS does not seem to explicitly associate the <label>
element's contents (ie, the alt text) with the form control, whether
the label element is inside the <form> tags or not.

A <label> element containing textual content is explicitly
associated with its form control when located inside the <form>
tags. I did not have a chance to test this outside the <form> tags.

Also, I noticed that JAWS does not seem to read title attributes on
<select> elements. Using the title attribute for form controls has
been suggested as one way of meeting the 508 accessible forms
requirement (using <label> is not the only way of meeting the
requirement, again something that Bobby seems to be unaware of).
For <input type="text"> elements, the title attribute is explicitly
associated with the form control just fine.

If anyone has HPR to test this stuff, I would be interested to hear
the outcomes.

Leo.

On 1 Apr 2002, at 16:43, Leo Smith wrote:

> Well, on one of my pages the form element's label is adjacent to it
> (directly above), but in this instance the <form> tags cannot
> encapsulate both the <label> and the form element:
>
> <.tr valign="top">
> <.td width="100%">
> <.label for="quicklinks"><.img src="/images/title_quicklinks.gif"
> width="165" height="25" border="0" alt="quick links"><./label>
> <./td>
> <./tr>
> <.tr valign="top">
> <.td width="100%">
> <.form method="post" action="/cgi-bin/go-url.cgi">
> <.select name="URL" class="homequicklinks"
> id="quicklinks">
> <.option value="something">something</option>
> <./select>
> <.input type="image" border="0"
> src="/images/button_go_quicklinks.gif" width="19" height="19"
> alt="go">
> <./form>
> <./td>
> <./tr>
>
> Is a screen reader not going to associate the label with the form
> element in this instance?
>
> Leo.
>
>
> On 1 Apr 2002, at 11:13, Kevin Spruill wrote:
>
> > Seems pretty straightforward either way - labels (logically) should
> > be placed with the form elements they refer to... within the form.
> > As for interpretation of the statue... how about this:
>
>
>
> Leo Smith
> Web Designer/Developer
> USM Office of Publications and Marketing
> University of Southern Maine
> 207-780-4774
>
>
> ----
> To subscribe, unsubscribe, or view list archives,
> visit http://www.webaim.org/discussion/
>



Leo Smith
Web Designer/Developer
USM Office of Publications and Marketing
University of Southern Maine
207-780-4774


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