W3C home > Mailing lists > Public > whatwg@whatwg.org > March 2007

[whatwg] One label: multiple fields

From: Robert Brodrecht <whatwg@robertdot.org>
Date: Tue, 13 Mar 2007 13:17:29 -0600 (CST)
Message-ID: <51086.66.151.50.244.1173813449.squirrel@www.robertdot.org>

> Elliotte Harold wrote:
> Pretty much like it does now I suspect. When presenting the form control
>  to a user, the software would assign it the label. It would just use
> the  same label more than once.
>
> The for attribute is not new. What's being proposed is simply allowing
> it to identify multiple controls rather than just one.

>From the HTML 4.01 Forms Recommendation [1]:

"When a LABEL element receives focus, it passes the focus on to its
associated control."

Sure.  I can click it with my mouse 10 times to go through 10 elements. 
It would work, even though it breaks the traditional idea of a label (e.g.
a soda bottle, for example, can have multiple labels but one label doesn't
have multiple bottles).  However, if I'm using a screen reader, I'd have
to tab(?) back up through the table to get to the label again.  After 10
times, I'd be exhausted and probably wouldn't be using the site anymore.

For sighted users, the table will be self explanatory.  Of the people I've
watched use the web, they still click form elements.  They don't click the
text first to see if it is a label.  Labels, pragmatically speaking, are
for semantics and for accessibility.  Having multiple items in the "for"
makes the form less accessible because the user has to backtrack to get at
the next element that the label applies to and because it isn't
necessarily apparent that, e.g., a table head would be a label for all the
elements in the column below it UNLESS it is seen visually instead of read
linearly.

An even better method than the one I suggested would be to do something like:

<label for="my_input">John Smith's Home Work 1 Score</label><input
type="text" value="82" id="my_input">

Then use CSS to position the label off-screen since sighted users don't
need to see it for the form to make sense (and screen readers will read it
anyway).  My first code snippet was attempting to remove the CSS portion
and collapse the code a little.  This revision would be much more
accessible as the label text is definitely available to the screen reader.

[1] http://www.w3.org/TR/html401/interact/forms.html#h-17.9.1

-- 
Robert <http://robertdot.org>
Received on Tuesday, 13 March 2007 12:17:29 UTC

This archive was generated by hypermail 2.4.0 : Wednesday, 22 January 2020 16:58:53 UTC