WebAIM - Web Accessibility In Mind

E-mail List Archives

A Couple of Table Topics

for

From: Randy Pearson
Date: Dec 29, 2003 9:57AM

Hi all,

There are two idea concerning HTML tables that we've been tossing around
internally, and it seemed they may both be of interest here.

The first topic concerns *row* headings and the sequence of columns in a
table and the idenitification of one column as a header. Best practice for
*column* headings seems straightforward and well-understood by now. But what
about row headings? What seems best is if the first column of data is also a
key field or one that identifies the row in some meaningful way. If so, the
cell can use a <th> tag, and the remaining cells in the row can reference
the ID in its "headers" attribute in addition to the column header. I don't
know how many assistive technologies currently take advantage of this
approach, but it sure can't hurt to employ this approach for the future.

A question we have is what happens if the identifying column is not the
first (left-most) column? Suppose, for example, the customer wants a
sequential number as the first column (1, 2, ) with the key column coming
second, or even later: Is this still an accessible design, assuming you use
the th/headers approach mentioned above?

The second topic concerns the linearization of tables. Most of our tables
are rendered via software classes that provide us with a lot of flexibility
for adaptation. We're thinking that it would be nice to have the option to
"linearize" tables into two-deep lists. This could help in both
accessibility and small-screen environments. As an example, a table that
started out like this:

STATE CODE POPULATION ...
Texas TX 23,465,882 ...
West Virginia WV 1,967,441 ...

could be linearized as:

* State: Texas
- Code: TX
- Population: 23,465,882
- more fields...
* State: West Virginia
- Code: WV
- Population: 1,967,441
- more fields...

Any thoughts on this? One thing we're thinking is that the above
transformation might even be possible in the future using pure CSS, by
styling blocks to switch between table cells and list elements.

Regards,

-- Randy Pearson



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