web Accessibility

Simple Tables - Checkpoint (g)

The law states:

"Row and column headers shall be identified for data tables."

Layout Tables

Do not use tables for laying out design elements of a web page. However, minor use of a layout table within the content area of a page is permissable for creating column lists of content. When used, do not create row and column headers for layout table. Section 508 standards recommend that you use CSS to layout web pages.

Data Tables

Screen readers read simple data tables from left to right, top to bottom.

Use the th tag with the scope attribute to label your row and/or column headers. In the example below, the th tag and scope attribute are not used. The screen reader would read the table in the following manner (it would not reconize any headings):

"Professor Name, Course, Section, Max Enrollment, Dr. Larry, BUS 318, 02, 30, Dr. Curly, FSN 112, 06, 25."

Professor Name Course Section Max Enrollment
Dr. Larry BUS 318 02 30
Dr. Curly FSN 112 06 25

Incorrect Markup for the Above Table

<table border="1" width="69%">
<tr>
<td><strong>Professor Name</strong> </td>
<td><strong>Course</strong> </td>
<td><strong>Section</strong></td>
<td><strong>Max Enrollment</strong></td>
</tr>
<tr>
<td><abbr title="Doctor">Dr.</abbr> Larry</td>
<td>BUS 318</td>
<td>02</td>
<td>30</td>
</tr>
<tr>
<td><abbr title="Doctor">Dr.</abbr> Curly</td>
<td>FSN 112</td>
<td>06</td>
<td>25</td>
</tr>
</table>

Note: the <abbr> abbreviate tag tells a screen reading technology to substitute the word "Doctor" instead of reading the individual letters "D" and "r" or trying to pronounce "der".

Using the <strong> tag to simulate headings is incorrect and doesn't tell the screen reading technology that each element is a heading. In this case, the screen reader reads the header only once, so the information in each successive row becomes confusing. To correct this flaw, use the th tag with the scope attribute in the heading row to define the header element. The th tag gives the headers a name and the scope attribute tells the screen reader whether the header is for a column (col) or for a row (row).

The table (below) looks the same, but now your users will know what the data in each data cell corresponds to. This is especially helpful for tables with a lot of data. The screen reader now reads each header with the corresponding column before reading the data in the row. The screen reader would read the table in the following manner :

"Course Listing by Professor, Professor Name, Dr. Larry, Course, BUS 318, Section, 02, Max Enrollment, 30, Professor Name, Dr. Curly, Course, FSN 112, Section, 06, Max Enrollment, 25"

Course Listing by Professor
Professor Name Course Section Max Enrollment
Dr. Larry BUS 318 02 30
Dr. Curly FSN 112 06 25

Correct Markup for the Above Table

<table width="100%" border = 1>
<caption><strong>Course Listing by Professor</strong></caption>
<tr>
<th scope="col">Professor Name</th>
<th scope="col">Course</th>
<th scope="col">Section</th>
<th scope="col">Max Enrollment</th>
</tr>
<tr>
<td><abbr title="Doctor">Dr.</abbr> Larry</td>
<td>BUS 318</td>
<td>02</td>
<td>30</td>
</tr>
<tr>
<td><abbr title="Doctor">Dr.</abbr> Curly</td>
<td>FSN 112</td>
<td>06</td>
<td>25</td>
</tr>
</table>


Information is AvailableHelpful Web Sites