Internal USGS Access Only

Building an Accessible Table

These instructions apply to data tables, not to the use of tables for layout. Do not use tables for layout unless the table makes sense when linearized [WAI Priority 2].

For Simple Tables

Simple tables are those where the type of information found in each row and column is constant.

Example

Use tags TH to identify headers and TD to identify data cells.
Or, use TD SCOPE="col" for column headers and TD SCOPE="row"; for row headers.

<table border="1">

                <tr>

	          <th>Name</th>

	           <td scope="col">Personality</td>

	        </tr>

                <tr>

	          <td>Lorna>/td>

	          <td>demur</td></tr>

                <tr>

	          <td>David>/td>

	          <td>boisterous</td>

	        </tr>

                <tr>

	          <td>Michelle>/td>

	          <td>absent-minded</td>

	        </tr>

              </table>

Name	Personality
Lorna	demur
David	boisterous
Michelle	absent-minded

For Complex Tables

For data tables that have two or more logical levels of row or column headers

The scheme here is that every header cell gets a unique ID="identifier" tag, and every data cell associated with that header gets a HEADERS="identifier" to that same identifier.

The following example is lifted from the W3C Techniques for Web Content Accessibility Guidelines 1.0 data tables section

This example shows how to associate data cells (created with TD) with their corresponding headers by means of the "HEADERS" attribute. The "headers" attribute specifies one or more header cells (row and column labels) associated with the current data cell. This requires each header cell to have an "ID" attribute.

<TABLE BORDER="1"
   SUMMARY="This table charts the number of
   cups of coffee consumed by each senator,
   the type of coffee (decaf or regular),
   and whether taken with sugar.">

   <CAPTION>Cups of coffee consumed by each
   senator</CAPTION>

   <TR>
   <TH ID="header1">Name</TH>
   <TH ID="header2">Cups</TH>
   <TH ID="header3" abbr="Type">Type of Coffee</TH>
   <TH ID="header4">Sugar?</TH>
   </TR>
   <TR>
   <TD HEADERS="header1">T. Sexton</TD>
   <TD HEADERS="header2">10</TD>
   <TD HEADERS="header3">Espresso</TD>
   <TD HEADERS="header4">No</TD>
   </TR>
   <TR>
   <TD HEADERS="header1">J. Dinnen</TD>
   <TD HEADERS="header2">5</TD>
   <TD HEADERS="header3">Decaf</TD>
   <TD HEADERS="header4">Yes</TD>
   </TR>
</TABLE>

Cups of coffee consumed by each senator
Name	Cups	Type of Coffee	Sugar?
T. Sexton	10	Espresso	No
J. Dinnen	5	Decaf	Yes

The id and headers approach will work for even the most complex tables, but it can be mind-boggling to code this sort of thing by hand. Finding an appropriate tool would be extremely helpful here.

The HTML 4 rowgroup, colgroup and axis attributes discussed in the WAI guidelines are not implemented by screen readers.

Tools

The web site accessify.com lets you build accessible tables online. DreamWeaver provides facilities for creating accessible tables, which can be enhanced with 3rd party module LIFT. Specialized accessibility checking tools such as PageScreamer may also have this capability.

slide 37

"Mastering a Web Site" online course
Created and maintained by Lorna Schmid and David Boldt.
http://water.usgs.gov/usgs/training/webmaster/accessible_table.html
Last modified: Mon Feb 5 17:53:51 EST 2007