Web Site Accessibility
Guidelines for SCS Webmasters

What is Accessibility? - Making Your Web Site Accessible
Checklist for Accessibility
Must Have Items - Should Have Items - Try To Have Items
Items for More Experienced Webmasters
Apply These Items if Your Use These Special Features

Tables

Rationale for Table Headers

If you can see a TV listing (tabular data), you have the ability to scan up a column and across a row to find the station and time of a program. If you cannot see the table, but are listening to it with speech synthesis, it can be a daunting task to try to find this simple information. The headers attribute provides one solution to this problem.

Many tables on Web sites today are used to layout the images and text. Because these tables do not contain tabular data and are only used for the visual effect, the techniques described in the checkpoint should not be used. Adding header information would be incorrect and only add confusion.

Rationale for Table Summaries and Captions

The CAPTION element describes the nature of the table in one to three sentences. By using the "summary" attribute, longer descriptions may be given to the user. Speech synthesizers will read the caption and summary providing more information to the visitor using an assistive technology.

Techniques for Table Headers

The following techniques may be used to meet the checkpoint described in the Special Features - Tables section of the Checklist for Web Site Accessibility.

Cell Headings

The TH element is used to mark up table heading cells of a row or column. Each TH element cell should also have a unique id attribute. The heading cells become reference points for data cells. For example:

<TR>
<TH id="t1">Name</TH>
<TH id="t2">Cups</TH>
<TH id="t3">Type of Coffee</TH>
<TH id="t4">Sugar?</TH>
</TR>

Data Cells with the Headers Attribute

Complex data tables that have two or more row or column headings or headings that span multiple columns require additional markup to explicitly associate the heading with the data. In the table data cells, the HEADERS attribute is used on the TD element to specify which heading cell is associated with a specific data cell. Note that the data cell containing the number 10 includes the attribute headers="t2", which relates to the heading cell with id="t2" labeled Cups. Therefore, the heading for 10 is Cups.

<TR>
<TD headers="t1">L. Smith</TD>
<TD headers="t2">10</TD>
<TD headers="t3">Espresso</TD>
<TD headers="t4">No</TD>
</TR>

The complexity of the table markup using the headers attribute is dependent on the complexity of the table. A data cell can have both a row heading and a column heading.

The HTML code in the following example modifies the code in the previous example. The heading for 10 is L. Smith Cups because the contents of "name1" is L. Smith", and the contents of "t2" is Cups.

<TR>
<TD headers="t1", id="name1">L. Smith</TD>
<TD headers="name1 t2">10</TD>
</TR>

Cups of coffee consumed by each teacher

Name	Cups	Type of Coffee	Sugar?
L. Smith	10	Espresso	No
M. Brown	5	Decaf	Yes

Techniques for <CAPTION> and "summary"

Here are examples of the CAPTION tag.

• "Cups of coffee consumed by each teacher."
• "Who spends the most on pollution cleanup?"

Here are examples of the "summary" attribute.

• "This table charts the number of cups of coffee consumed by each teacher, the type of coffee, and whether taken with sugar."
• "Total required by pollution control standards as of January 1, 1971. Commercial category includes stores, insurance companies and banks. The table is divided into two columns. The left-hand column is 'Total investment required in billions of dollars'. The right-hand column is 'Spending' and is divided into three sub-columns. The first sub-column is titled '1970 actual in millions of dollars', the second is '1971 planned in millions of dollars', and the third is 'Percent change, 1970 versus 1971.' The rows are industries."

The "title" attribute can be used with the <TABLE> tag instead of using the <CAPTION> tag. This will still allow the speech synthesis software to read the title (caption) of the table but the title (caption) of the table will not show on the browser screen.

Sample of markup for a table

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 a list of 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 teacher, the type of coffee, 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>
<TD headers="header1">L. Smith</TD>
<TD headers="header2">10</TD>
<TD headers="header3">Espresso</TD>
<TD headers="header4">No</TD>
<TR>
<TD headers="header1">M. Brown</TD>
<TD headers="header2">5</TD>
<TD headers="header3">Decaf</TD>
<TD headers="header4">Yes</TD>
</TABLE>

A speech synthesizer might read the table as follows:

"Caption: Cups of coffee consumed by each senator
Summary: This table charts the number of cups of coffee consumed by each teacher, the type of coffee, and whether taken with sugar.
Name: L. Smith, Cups: 10, Type: Espresso, Sugar: No
Name: M. Brown, Cups: 5, Type: Decaf, Sugar: Yes"

What is Accessibility? - Making Your Web Site Accessible
Checklist for Accessibility
Must Have Items - Should Have Items - Try To Have Items
Items for More Experienced Webmasters
Apply These Items if Your Use These Special Features