Accessibility with forms, tables, labels and input fields

[Isofarro]

For accessibility, labels should explicitly map to one input element. But
what to do when a text label pertains to three input fields, for instance
date of birth?

I have an html snippet:

<tr>
<th scope="col">
<label for="dobdd">Date of Birth (dd/mm/yyyy)</label>
</th>
<td>
<input type="text" name="dobdd" id="dobdd" />
<input type="text" name="dobmm" id="dobmm" />
<input type="text" name="dobyyyy" id="dobyyyy" />
</td>
</tr>

Now logically the label maps to all three fields, but the label
specification allows one id in the for attribute. Any suggestions of
clarifying this little oddity?

--
Iso.
FAQs: http://html-faq.com http://alt-html.org http://allmyfaqs.com/
Recommended Hosting: http://www.affordablehost.com/
Web Design Tutorial: http://www.sitepoint.com/article/1010

[Nick Kew]

In article <li***********@sidious.isolani.co.uk>, one of infinite monkeys
at the keyboard of Isofarro <sp*******@spamdetector.co.uk> wrote:

Now logically the label maps to all three fields,

Disagree. It doesn't map to any of them individually.

The structure you described looks to me like a fieldset, and your
label its legend. Within the fieldset, each of the three fields
has a label.

Now, consider the visual rendition of what you described:

<td>
<input type="text" name="dobdd" id="dobdd" />
<input type="text" name="dobmm" id="dobmm" />
<input type="text" name="dobyyyy" id="dobyyyy" />
</td>

Schematically, that's
________ ________ ________
which is no great help to anyone.

In the absence of further cues, that's seriously confusing. An american
will get it wrong if they assume their inside-out date notation. I'd
be inclined to pre-populate those fields with things like "dd" - and
perhaps use an onclick event to clear the preset values for convenience.

Or - ahem - make it a single field.

--
Nick Kew

In urgent need of paying work - see http://www.webthing.com/~nick/cv.html

[Isofarro]

Nick Kew wrote:

Now, consider the visual rendition of what you described:

<td>
<input type="text" name="dobdd" id="dobdd" />
<input type="text" name="dobmm" id="dobmm" />
<input type="text" name="dobyyyy" id="dobyyyy" />
</td>

Schematically, that's
________ ________ ________
which is no great help to anyone.

In the absence of further cues, that's seriously confusing. An american
will get it wrong if they assume their inside-out date notation. I'd
be inclined to pre-populate those fields with things like "dd" - and
perhaps use an onclick event to clear the preset values for convenience.
I'm lucky in a way that the website offers products for the UK only. So
inside out dates shouldn't be a problem. Although prepopulating the fields
with dd mm and yyyy are probably still very useful.
Or - ahem - make it a single field.

That's what I am going to recommend as a better solution. Although the
initial spec did have it as one field, then they split it into three - I'll
check the reasons behind that decision and see if they hold.

--
Iso.
FAQs: http://html-faq.com http://alt-html.org http://allmyfaqs.com/
Recommended Hosting: http://www.affordablehost.com/
Web Design Tutorial: http://www.sitepoint.com/article/1010