(g & h) DATA TABLES


checkbox Identify column and row table headers.
checkbox Associate all rows and columns with their headers (HTML).

Many Web authors utilize tables to control for layout and presentation purposes. In addition to using tables for presentation purposes, tables are also used to present data information on a web page.

Tables used for presentation purposes are generally referred to a layout tables while tables used to organize information are referred to as data tables. Layout tables are generally okay and do not need to be made accessible.

The following information details how to make data tables accessible to visually impaired individuals who use screen readers to access the Web.

Formatting Data Tables

Data tables are exactly what the name implies - a table that contains data about some information sequenced in a specific format. For example, if you have a list of days, a list of appointments on specific days, and a list of specific times for those appointments on specific days, it would make sense to develop a table to display that information. Here is a practical example below:

  Sun. Mon. Tues. Wed Thurs. Fri. Sat.
9 am sleep   work work   work sleep
12 pm nap lunch     lunch   nap
2 pm feed cat     brush cat     breakfast
5 pm       hospital     nap
6 PM   football         party


The benefit of such a data table is that it provides information in a visually organized format such that one can quickly identify the day of the appointment and time in a simple and easy manner. There are several methods to make data tables more accessible using specific HTML attributes.

Using the Scope Method:

Using the "scope" attribute is one of the most effective ways of making HTML compliant with these requirements. It is also the simplest method to implement. The scope attribute also works with some (but not all) assistive technology in tables that use "colspan" or "rowspan" attributes in table header or data cells.

The first row of each table should include column headings. Typically, these column headings are inserted in <TH> tags, although <TD> tags can also be used. These tags at the top of each column should include the following attribute:

scope="col"

By doing this simple step, the text in that cell becomes associated with every cell in that column. Unlike using other approaches (notably "id" and "headers") there is no need to include special attributes in each cell of the table. Similarly, the first column of every table should include information identifying information about each row in the table. Each of the cells in that first column are created by either <TH> or <TD> tags. Include the following attribute in these cells:

scope="row"

By simply adding this attribute, the text in that cell becomes associated with every cell in that row. While this technique dramatically improves the usability of a web page, using the scope attribute does not appear to interfere in any way with browsers that do not support the attribute.

Example:

<table border="1" cellpadding="4" cellspacing="4" >
<tr>
<th>&nbsp;</th>
<th scope="col" >Spring</th> <th scope="col" >Summer</th>
<th scope="col">Autumn</th> <th scope="col" >Winter</th> </tr>
<tr> <td scope="row" >Betty</td> <td>9-5</td> <td>10-6</td> <td>8-4</td><td>7-3</td>
</tr>
<tr> <td scope="row" >Wilma</td> <td>10-6</td> <td>10-6</td> <td>9-5</td> <td>9-5</td>
</tr>
<tr> <td scope="row" >Fred</td> <td>10-6</td> <td>10-6</td> <td>10-6</td> <td>10-6</td>
</tr>
</table>

This table would be displayed as follows:

  Spring Summer Autumn Winter
Betty 9-5 10-6 8-4 7- 3
Wilma 10-6 10-6 9-5 9- 5
Fred 10-6 10-6 10-6 10- 6

Using the "ID" and "Headers" attribute:

The "id" and "headers" attributes require that every data cell in a table include special attributes for association. Although its usefulness for accessibility may have been diminished as browsers provide support for the "scope" attribute, the "id" and "headers" attributes are still very useful and provide a practical means of providing access in smaller tables.

The following table is much more complicated than the previous example and demonstrates the use of the "id" and "headers" attributes. Both methods provide a means of complying with the requirements for data tables in web pages. The table in this example includes the work schedules for two employees. Each employee has a morning and afternoon work schedule that varies depending on whether the employee is working in the winter or summer months. The "summer" and "winter" columns each span two columns labeled "morning" and "afternoon." Therefore, in each cell identifying the work schedule, the user needs to be told the employee's name (Fred or Wilma), the season (Summer or Winter), and the shift (morning or afternoon).

Example:

<table>
<tr>
<th>&nbsp;</th>
<th colspan="2" id="winter" >Winter</th>
<th colspan="2" id="summer" >Summer</th>
</tr>
<tr>
<th>&nbsp;</th>
<th id="am1" >Morning</th>
<th id="pm1" >Afternoon</th>
<th id="am2" >Morning</th>
<th id="pm2" >Afternoon</th>
</tr>
<tr>
<td id="wilma" >Wilma</td>
<td headers="wilma am1 winter" >9-11</td>
<td headers="wilma pm1 winter" >12-6</td>
<td headers="wilma am2 summer" >7-11</td>
<td headers="wilma pm2 summer" >12-3</td>
</tr>
<tr>
<td id="fred" >Fred</td>
<td headers="Fred am1 winter" >10-11</td>
<td headers="Fred pm1 winter" >12-6</td>
<td headers="Fred am2 summer" >9-11</td>
<td headers="Fred pm2 summer" >12-5</td>
</tr>
</table>

This table would be displayed as follows:

  Winter Summer
  Morning Afternoon Morning Afternoon
Wilma 9-11 12-6 7-11 12-3
Fred 10-11 12-6 9-11 12-5


checkbox Provide a text summary of all data tables.

Not all assistive technology products will interpret data tables using these options in this same manner, but data tables encoded in an accessible format will provide a greater opportunity for those needing assistive technology to gain access to on-line information. Using the <summary> tag can also assist screen-reader users in understanding the layout and content presented in a table. It is important to note that not all assistive technology developers support this attribute at the current time.

Remember the following:

  1. Design the table using either the scope or id and header attributes.
  2. Within the <table> tag insert the attribute summary= "descriptive table summary goes here". It is recommended to place this information as close to the start of the table as possible.
  3. A good description of the table will include a brief identification of the content displayed in the row, the column, and the cell.
  4. If possible, check the table and summary using screen-reader technology.

Example:

<table summary="Table of Betty, Wilma, and Fred's schedule during each of the four seasons.">

An additional resource for making data table accessible:

<< Go Back