WebAIM - Web Accessibility In Mind

E-mail List Archives

RE: Form Labels

for

From: Andrew Johns
Date: Sep 30, 2002 8:20AM

In my experience, I've achieved accessibility in this situation by using the fieldset tag, to group the 3 elements together under the heading "Date" and then use label on the individual drop downs, for example:

<fieldset>
<legend>Date</legend>
<label for="day">Day:</label><input type="text" name="day" id="day">
<label for="day">Month:</label><input type="text" name="month" id="month">
<label for="day">Year:</label><input type="text" name="year" id="year">
</fieldset>


Then I'd use styles to style it appropriately, e.g. to make the legend appear more like the rest of the form labels, and to hide the unwanted labels (day,month,year) from browsers that support CSS.

This example isn't always acceptable, though, as it depends heavily on the design requirements and whether clients are willing to accept that it won't look consistent (mainly the issue is with using CSS on the fieldset/legend) in each browser, but AFAIK, it IS the appropriate way to make it accessible.


Regards,

Andy