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>