Tables are useful for displaying information in rows and columns and are also sometimes used to format material on a web page. Many web page authors are familiar with creating tables using the TABLE tag, but less so with all of the accessibility guidelines when creating tables.
If a table is not properly formatted, then assistive technology like screen readers cannot intelligibly render the information to the user. Consequently, the user is left "lost" and unable to discern the information contained within the table.
In addition to improving the navigability of the table, properly formatting tables enable web authors to add supplemental information such as captions, summaries, and column and row headers to better inform the user about the table's "message." On this page, you will examine how to properly format tables to best convey information in an accessible modality.
When creating tables, there are three main sections of the table:
In addition to the "head", "body", and "foot" sections of the table, an accessible table should also contain:
The template structure of an accessible HTML table looks like this:
<table border="1"
summary="This is a long description of the
table, providing an overall view of
the table for non-visual readers.">
<caption>
This is the caption of the table
</caption>
<thead>
<tr>
<th scope="col">First Column</th>
<th scope="col">Second Column</th>
<th scope="col">Third Column</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total of column 1</th>
<th>Total of column 2</th>
<th>Total of column 3</th>
</tr>
</tfoot>
</table>
Within the table, a row of information using the TR tag is specified as well as elements within a row using TH or TD tags; the TH tag is used to provide header information, and the TD tag is used to provide data information. The above example has one row specified in the table header section; this row contains three columns, each marked with the TH tag. It also has two rows specified in the table body section. Each of these two rows contains three data elements (marked with the TD tag), making each row contain three columns of data.
You might have also noticed the "scope" attribute of the TH tags. This is used to "connect" the columns of data to their header. In doing this, non-text readers will be able to effectively navigate through the data and read the table correctly to the user.
If you view this sample table in your Web browser, you should see something like the following:
| First Column | Second Column | Third Column |
|---|---|---|
| Cell 1 | Cell 2 | Cell 3 |
| Cell 4 | Cell 5 | Cell 6 |
| Total of column 1 | Total of column 2 | Total of column 3 |
Notice that the header cells are already highlighted, the caption is displayed atop the table, and all of the data cells are filled in.
The following lab focuses on table elements within HTML.
College of Architecture (COA)
Fax: 404-894-9320
Phone: 404-894-4960 (v/tty)
User Agreement
HTML
Tables
Previous Page
