E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 3 (In chronological order)

From: Martin, Lainie
Date: Wed, Jan 14 2004 10:01AM
Subject: Complicated tables and forms question
No previous message | Next message →

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/

From: Tim Harshbarger
Date: Wed, Jan 14 2004 10:43AM
Subject: RE: Complicated tables and forms question
← Previous message | Next message →

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
>

From: Sandy Clark
Date: Wed, Jan 14 2004 1:36PM
Subject: RE: Complicated tables and forms question
← Previous message | No next message

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 ADDRESS REMOVED =