Re: [webwatch] Making a Table Accessible

Kelly, you hit the nail on the head, as usual.  This is a beautiful example.

Note how the tables used to select from among a variety of email list archive
indices suffers from the same problem, for example at

w3c-wai-gl@w3.org Mail Archives
<http://lists.w3.org/Archives/Public/w3c-wai-gl>http://lists.w3.org/Archive
s/Public/w3c-wai-gl/

There is a bug in how we did the LABEL functionality for form controls in HTML
4.  Because the LABEL points to the control, instead of the other way
around, a
given LABEL can only explain one control.  In your example, the TH values at
the head of the columns are clearly the LABELs for the multiple checkboxes in
the column.  So:

Please experiment with upgrading the markup in the table.

Experiment #1: add a scope attribute to the column headers:

For example, what had been

<th>dial a 1</th>

becomes 

<th scope='col'>dial a 1</th>

etc.

Experiment #2: use 'headers' attribute for the same information:

Here the change to the headers becomes:

<th id='123'>dial a 1</th> -- all ID values must be different from one another

and the typical data cell entry in that column becomes

<td headers='123'><input type=checkbox></td>

There is a logical principle that we didn't spell out well enough and that the
assistive technology should be applying, which is that if a hotlink or a form
control appears in a table cell, the table headers associated with that table
cell should be treated as effective control labels of the form control or
hyperlink.

See how well they do on this example with the above assistance.

There is an algorithm in the HTML 4 specification that suggests how one can
guess the data to header relationships in your table, but at this point I am
not sure we should be relying on that.  If the assistive technology can
pick up
on the explicit linkage, we should make the de_facto advice to authors to mark
up even simple tables pedantically so the assistive technology can get the
hint.

Meanwhile we need to consider this case in the re-engineering of XHTML 2.0 to
make this label effect for table headers more clear in the specification.

Al

http://lists.w3.org/Archives/Public/w3c-wai-glAt 08:17 PM 2001-03-06 -0800,
you
wrote:
>Hi All,
>
>My expertise is not necessarily in writing HTML but rather in figuring out 
>how assorted accessibility aids handle it.  I'm trying to gain more skill 
>in coding HTML in an attempt to figure out many of the quirks that I 
>experience when using different browsing technology.  Suppose you have a 
>table that is four columns wide, with three of the four columns holding 
>check boxes to indicate selections about the item in the finl 
>column.  Excluding all the tags and such necessary to turn this into an 
>actual form, my belief is that the following would produce the desired 
>visual effect.
>
><table>
><tr>
><th>Use This Number</th>
><th>Dial a 1</th>
><th>Dial the area code</th>
><th>Phone Number</th>
></tr>
><tr>
><td><input type=checkbox></td>
><td><input type=checkbox></td>
><td><input type=checkbox></td>
><td>(503) 555-5555</td>
></tr>
><tr>
><td><input type=checkbox></td>
><td><input type=checkbox></td>
><td><input type=checkbox></td>
><td>(920) 555-5555</td>
></tr>
></table>
>
>The problem is that as far as I can tell this type of design isn't very 
>accessible.  You end up with three check boxes that have no text associated 
>with them and then the phone number for which you are making selections 
>with those check boxes.
>
>When I load this coding into Internet Explorer, neither JAWS or Window-Eyes 
>read the correct information when I tab to the check boxes or adjust their 
>status.
>
>So how would you go about making this sort of table accessible?
>
>Kelly
>
>
>To Post a message, send it to:   webwatch@eGroups.com
>To Unsubscribe, send a blank message to: webwatch-unsubscribe@eGroups.com 
>
>Your use of Yahoo! Groups is subject to
<http://docs.yahoo.com/info/terms/>http://docs.yahoo.com/info/terms/ 
>

Received on Wednesday, 7 March 2001 09:27:02 UTC