Tables are very useful for data presentation because it permits a vision-capable person to quickly locate rows, columns and individual cells. Table 1 illustrates the revenue of different regions in different quarters.
|
The most intuitive coding for this table is in listing 3. Note that this may be generated dynamically by a CGI script.
| Listing 3: | first try |
When rendered, listing 3 looks right. However, a screen reader will simply row by row. With only four quarters, some users can still keep count of the position in a row. However, when the number of quarters increase to 8, it is virtually impossible for a non-visual user to remember which figure is for which quarter.
This is why we need to use headers. Listing 4 shows the revised table coding.
| Listing 4: | second try |
In the first revision, we use the <TH> tag instead of <TD>. Besides the text being rendered differently, the <TH> tag also tells the “user agent” that a cell is the header of some cells.
Line 2 adds the extra summary attribute so that a screen reader can read this extra text (that is not displayed). Note how the summary briefly describes the organization of the table. This gives a screen reader a chance to explain the structure of the table before cells are read.
Line 3 adds a caption element. The <CAPTION> element, unlike the summary attribute of a <TABLE> tag, is displayed. This is just helpful, even to vision capable users.
On line 5, there are extra attributes for the table header. The id attribute gives the rest of the table the ability to refer to it. A cell can use the header attribute to explicitly link itself with a particular header. However, we do not use the header attribute in cells here because we use the scope attribute in a table header tag. In this case, scope="col" means that this table header element applies to all cells in the same column.
Line 12 defines another table header. However, this time, the table header applies to the rest of the row. This is because of the attribute scope="row". Again, no cell use the header attribute to link back to this header because the header itself specifies the scope.
Also, note that the table header now spells out the region. It is time consuming for a screen reader to read the entire long name of a region for each cell. Consequently, we use the abbr (abbreviation) attribute to define the abbreviation of “San Francisco” as “SF”.
The header information gives a screen reader the capability to spell out how a cell relates to the column and row. Without the header, a screen reader will read the second row as follows:
“S F dollar 235 k dollar 250 k ...”
With the extra header information, a screen reader can read the same row as:
“San Francisco S F 2003 Q 1 dollar 235 k S F 2003 Q 2 dollar 250 k...”