§1194.22(g) Row and column headers shall be identified for data tables.

§1194.22(h) Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.

Checkpoint
Does the page contain tables?

Explanation
Tables are used quite often to display data on a web page, and it is a particularly popular and efficient way for an application to display multiple records drawn from a database. Additionally, some developers still use tables as a page layout tool for aesthetics purposes. If necessary, check the page's source code for the <table> tag.

Checkpoint
Does the table contain content or data?

Explanation
Any table that is created for the express purpose of displaying a related grouping of information (usually horizontally) is considered a content table.

Tables used for aesthetic page layout are not considered content tables, and are exempt from the remainder of the tables checklist.

Checkpoint
Are the column headers clearly marked and defined with the proper tagging?

Explanation
Typically, any list of data displayed in a table is positioned so that common categories within each record are aligned within columns (vertical groupings). To accommodate those who use assistive technology, specific tags and attributes must also be used to define column headers.

Guidelines
Visually, column headers are usually marked by naming the category in the top row, and by highlighting that column header in some way (e.g. the column header "Phone Numbers" could be displayed in bold text, or could be contained in a different colored cell).

A sighted user can easily determine which column a particular piece of information falls under because he/she can see the entire table at once, but those who use assistive technology can only hear the table being read one cell at a time, in the left-to-right / top-to-bottom order it is displayed in. To accommodate assistive technology, all column headers must be placed within <th> tags instead of <td> tags, and must also be assigned an id attribute.

<table>
   <tr>
      <th id="t1">Employee</th>
      <th id="t2">Title</th>
      <th id="t3">Cube</th>
      <th id="t4">Extension</th>
   </tr>

Next, add the headers attribute to all <td> tags whose cells contain record data. In the example below, the headers attribute of the <td> cell that contains the name of Employee Joe Techie has been given the same value, "t1," as the "Employee" header cell that would appear directly above it; the headers attribute of the <td> cell that contains the employee's title, "Sr. Programmer / Analyst," has been given the same value, "t2," as the "Title" header cell, etc.

   <tr>
      <td headers="t1">Joe Techie</td>
      <td headers="t2">Sr. Programmer / Analyst</td>
      <td headers="t3">346</td>
      <td headers="t4">0879</td>
   </tr>

   <tr>
      <td headers="t1">Bobby Bookworm</td>
      <td headers="t2">Research Analyst</td>
      <td headers="t3">353</td>
      <td headers="t4">1688</td>
   </tr>
</table>

Assistive technology might read the above table as: "Employee: Joe Techie; Title: Sr. Programmer / Analyst; Cube: 346; Extension: 0879; Employee: Bobby Bookworm; Title: Research Analyst; Cube: 353; Extension: 1688."

NOTE: not all assistive technologies are currently able to accommodate id and header attributes, but the use of these attributes is an industry standard that many assistive technology manufacturers will ultimately follow.

The W3C web site contains more information on using id and headers attributes for tables:
http://www.w3.org/TR/html4/struct/tables.html#h-11.4

Checkpoint
Are the row headers clearly marked and defined with the proper tagging?

Explanation
Some tables are structured to highlight the row record's first column. In such a case, the record's most identifiable piece of information, oftentimes a database table's primary key, will be positioned as the row record (e.g. a listing of employees will often have the employee's name in the first column).

Guidelines
There are no special tags that can be used to indicate a row header, yet the id attribute should still be used in the same way it is used for column headers.

Additionally, sighted users can be accommodated by using the <strong> or <em> tag to highlight the content within the first column of each row.

NOTE: not all assistive technologies are currently able to accommodate id and header attributes, but the use of these attributes is an industry standard that many assistive technology manufacturers will ultimately follow.

Checkpoint
Does the page contain complex tables?

Explanation
A table that has a main column header and several subordinate column headers underneath can be considered a complex table. A table that contains clearly marked row headers with subordinate row headers underneath (e.g. a list of employee names, each with breakdowns of what projects they are working on) can also be considered a complex table.

Guidelines
In the example below, both rows of column headers are enclosed with the <th> tags that contain id attributes.

<table>
   <tr>
      <th colspan=2> </th>
      <th id="app" colspan=3>Approved by</th>
   </tr>

   <tr>
      <th id="date">Date Submitted</th>
      <th id="num">Number submitted</th>
      <th id="p1">Person 1</th>
      <th id="p2">Person 2</th>
      <th id="p3">Person 3</th>
   </tr>

Additionally, the cell containing the value 'October' in the example below has been marked with an id attribute value that represents the cell's value, and contains a headers attribute that matches it with the Date Submitted column header in the previous example.

   <tr>
      <td id="oct" headers="date">October</td>
      <td colspan=4> </td>
   </tr>

   <tr>
      <td id="early" headers="date oct">1-15</td>
      <td headers="oct early num">20</td>
      <td headers="app p1 oct early">15</td>
      <td headers="app p2 oct early">10</td>
      <td headers="app p3 oct early">17</td>
   </tr>

Assistive technology might read the above table as: "Date submitted: October…1-15…number submitted: 20… approved by person one: 15; approved by person two: 10; approved by person three: 17…"

NOTE: not all assistive technologies are currently able to accommodate id and header attributes, but the use of these attributes is an industry standard that many assistive technology manufacturers will ultimately follow.

The W3C web site has more information on coding complex tables:
http://www.w3.org/TR/html4/struct/tables.html#h-11.4.2