WebAIM - Web Accessibility In Mind

E-mail List Archives

RE: Complicated tables and forms question

for

From: Sandy Clark
Date: Jan 14, 2004 1:36PM

I've done something like this before.

I actually created labels for each input tag in my grid which specified the
row and column headers and I styled it with a .hidden class.

I used the following style for hidden, since some screen readers actually
abide by visibility:hidden.

.hidden{
/* show any descriptive text in a link only in speech browsers, hide
in all visual browsers. */
height: 0;
width: 0;
overflow: hidden;
position: absolute; /* for the benefit of IE5 Mac */}

A typical grid might be
year 1 2 3 4 5
Stipend Year cell cell cell cell cell
Tuition and Fees cell cell cell cell cell

So a cell for the intersection of Stipend Year and Year 1 would be:
<td><label class="hidden" for="stipy1">Stipend Year 1</label><input
type="text" name="stipendy1" id="stipy1" value="$" size="10" /></td>

I've written two blog articles on this, which you can read at:

Non-descriptive links and the user experience
http://www.shayna.com/blog/index.cfm?mode=entry&;entry=3369BACA-04EF-B514-AB0
2C25C8BADAD60

On Labels and Titles
http://www.shayna.com/blog/index.cfm?mode=entry&;entry=E6671195-F0BD-5D53-0AD
920A3046BFBBA


Sandra Clark
Senior Software Developer
Constella Group
<EMAIL REMOVED>
-----Original Message-----
From: Tim Harshbarger [mailto: <EMAIL REMOVED> ]
Sent: Wednesday, January 14, 2004 12:28 PM
To: ' <EMAIL REMOVED> '
Subject: RE: Complicated tables and forms question

Lainie,

Using the title attribute on the input tag may be the best solution
available.

There is not a good way in HTML to label a field that has both a column and
row label.

If each column had its own label, you might be able to do something with a
combination of div, fieldset, legend, and label tags using a little CSS on
the side -- but from your description that probably will not get you what
you want.

Thanks,
Tim
>-----Original Message-----
>From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ]
>Sent: Wednesday, January 14, 2004 10:52 AM
>To: <EMAIL REMOVED>
>Subject: Complicated tables and forms question
>
>
>Hi all - New to the listserv and I've searched through the archive and
>couldn't find my answer.
>
>I have a series of text form fields inside a data table with both
>column and row headings. How do you label each field in this case?
>Someone suggested I place a 'title' tag on each text input and this
>seemed the best solution. But I couldn't get JAWS 3.7 to read the
>titles (which I realize this is a 3 year old version of JAWS and this
>may be the problem). If most screen readers will sufficiently read the
>title tag, then I will go with that.
>
>Simply doing my scope=row and scope=col on my column and row headers is
>not giving me sufficient labeling of each field.
>
>Any advice would be GREATLY appreciated!
>
>Lainie
>
>
>----
>To subscribe, unsubscribe, suspend, or view list archives, visit
>http://www.webaim.org/discussion/
>
>


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




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