labels for form controls that don't have labels.

All.

Thanks all for the discussion on the css instead of JavaScript issue.  I have another issue for discussion...

I am trying to find a way to make form controls accessible to screen reader users where the form control is one that ordinarily does not have an on-screen label, and cannot have one due to design constraints.  Some examples are:

1.  a checkbox that relates to an entire table row in a data table, the checking of which relates to the selection of a particular set of data in the table.  i.e. the checkbox is the leftmost cell on the row, but the row consists of data that comes under the column headings such as date, phone number, time, cost, etc.  Also other examples may be a set of radio buttons, one per row.  One solution is to put label element tags around the whole row and use appropriate for and id attributes.  But the reading of an entire row may be confusing to some users.

2.  A series of edit fields designed to take parts of a phone number.  I.e. country code, area code and number are separate, but the only on-screen label is the one for the entire set.  One solution is to use invisible text labels (see below).

3.  a series of form controls in different cells of the same row of a table where the table is a data table, but certain values need to be altered or set on submitting the form.  One solution is to code the label around the form field itself or else a particular cell that best represents it.

However, for all these examples, it is difficult to use label elements for each form control including a text label where there is no logical room for one on the screen.  I have looked at the following solutions:
1.  use visibility: hidden or display: none; for a span that covers the contents of the label , thus allowing a descriptive label to be included but not appearing on the screen.  Some z-index and positioning styles may be required here as well.  .  However, new screen readers such as jaws 4.5x are now treating invisible text properly and not reading it.
2.  Using title attributes for the input elements and not having labels at all.  but this violates the guidelines.
3.  Including label, but only to surround the form control itself, but not to include any real other label element content.  Rather, include title attributes on both the label and input element as required.  This seems the best solution at the moment.  But it still does not involve label content and the behaviour may be somewhat dubious with some screen readers.

Any other notes or ideas or discussion is welcome.

Regards.

Mat.

Received on Wednesday, 28 May 2003 01:36:50 UTC