Universal Design for Web Applications

Complex Data Tables

A complex data table has at least one heading that spans multiple rows or columns. The table shown in Figure 6-2 (which was taken from http://ks.water.usgs.gov/Kansas/pubs/fact-sheets/fs.024-00.pdf) is a complex table because it has both row and column headings and several of the row headings span multiple rows. For example, “Flash Flood” applies to four rows—map numbers 21–24.

Figure 6-2. Example of a complex table

Summary

A well-written summary can provide a verbal map that helps someone using a screen reader navigate the data more efficiently:

<table summary=" The table is divided into six columns:  Map number,
Date,  Area or stream with flooding, Reported deaths, Approximate costs
 (uninflated), and Comments.  The rows are grouped by flood types into six
 subcategories:  Regional flood, Flash flood, Ice-jam flood, Storm-surge
flood, Dam-failure flood, and Mudflow flood.  ">
 ...

The preceding code summarizes the table with the following information:

• The number and titles of the column headings

• The stubhead (“The rows are...”) and subheadings

• Key information

Most screen readers will announce the number of columns and rows upon entering a table. The summary attribute allows you to provide information about how to read the table—information that could be useful to anyone not familiar with the data you are presenting.

Note

Always try to avoid using the same text ...