A table can be classified as a data table whenever you need to specify a row or column with header information about that row/column. If no informational header is needed, then it is a formatting table.
When using tables to present data, use the use the TH and SCOPE tags to identify which cells are row and column headers. This helps the screen reader organize the data to be read in a logical order and identify data types.
SECTION 508 - Row and column headers shall be identified for data tables.
Avoid spanned rows and columns in data tables, especially as headers. Many screen readers cannot properly parse these.
In general, data cells should take up one row only; this helps older screen readers read the table coherently.
Make sure any abbreviations and acronyms used in the tables are accessible.
For complex data tables, you must use newer accessibility tags such as SCOPE, CAPTION, SUMMARY, ABBR, ACRONYM, TFOOT and THEAD as needed to further organize information in complex data tables.
SECTION 508 - Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.
Unfortunately, screen readers may not be able to process the new tags. Consider replacing one complex table with a series of linked simple tables. Screen reader access is generally more straightforward and code maintenance may be simpler as well.
See the Complex Table Tags section for more details.
A simple table here means means that there is a maximum of one row category and one column category. Use of the TH and SCOPE tags combined with CAPTION and SUMMARY tags will provide sufficient information for most newer screen readers to process simple tables.
The TH tag is used to designate certain cells as row and column headers. Visually, the TH tag changes the text formatting to bold face and center in most browsers.
The SCOPE attribute in the TH tag is used to further define whether the header is a row ( <th scope="col"> ) or a column ( <th scope="row"> ). Designating the SCOPE changes the order in which cells are read out in a screen reader from the default left-to-right, top to bottom order. This code is sufficient for most screen readers to process simple tables (one header row and one header column), but additional tags are needed for more complex tables. See below for details.
| Color | Spanish | French | Irish | Welsh |
|---|---|---|---|---|
| Black | negro | noir | dubh | du |
| White | blanco | blanc | bán | gwyn |
| Red | rojo | rouge | ruadh | coch |
| Blue | azul | bleu | gorm | glas |
| Green | verde | vert | glas | gwyrdd |
| Yellow | amarillo | jaune | buí | melyn |
Note: Blue cells with bold, centered text are TH. The blue background is from a style sheet.
Because this table contains TH tags with the proper SCOPE definitions, some screen readers will read this table as follows.
Color: Black, Spanish: negro, French: noir, Irish: dubh, Welsh: du.
Color: White, Spanish: blanco, French: blanc, Irish: bán, Welsh: gwyn.
Color: Red, Spanish: rojo, French: rouge, Irish: ruadh, Welsh: coch...
<table>
<caption>
Donuts consumed by each staff member
at Monday Meeting
</caption>
<tr>
<th scope="col"> Color </th>
<th scope="col"> Spanish </th>
<th scope="col"> French </th>
<th scope="col"> Irish </th>
<th scope="col"> Welsh </th>
</tr>
<tr>
<th scope="row"> Black </th>
<td> negro </td>
<td> noir </td>
<td> dubh </td>
<td> du </td>
</tr>
<tr>
<th scope="row"> White </th>
<td> blanco </td>
<td> blanc </td>
<td> bán </td>
<td> gwyn </td>
</tr>
</table>
The data would be read as a list with no identifiers. You would have to memorize which word went with a particular language.
Black, negro, noir, dubh, du.
White, blanco, blanc, bán, gwyn.
Red, rojo, rouge, ruadh, coch...
The CAPTION tag can be used to display a title for the table. It can be visually formatted and be positioned above or below the table as needed.
| Cell 1 | Cell 2 | Cell 3 |
<table>
<caption>
Table Showing Screen Reader Order
</caption>
<tr>
<td> Cell 1 </td>
<td> Cell 2 </td>
<td> Cell 3 </td>
</tr>
</table>
The SUMMARY attribute is placed within the TABLE tag and is read by the screen reader only. It can be used to clarify the organization of a table or provide a quick summary of results. It should not repeat CAPTION text.
| Cell 1 | Cell 2 | Cell 3 |
<table summary="Table cells are read left to right,
top to bottom. ">
<caption>
Table Showing Screen Reader Order
</caption>
<tr>
<td> Cell 1 </td>
<td> Cell 2 </td>
<td> Cell 3 </td>
</tr>
</table>
When possible, data cells should take up one row so that screen readers which do not process tables well will be better able to read the content.
In some cases, text can be forced onto one line by inserting a non-breaking space code ( ) between words. For example
I can make sure this is one line.
I can make sure this is one line
It is possible to structure complex tables to be accessible via the AXIS, HEADER, THEAD, TBODY and similar tags, but it is very tricky to implement. In addition, standards are in flux, so recommendations may vary. Below are some tutorials which explain how some of these functions work.
- Web AIM Table Tutorial - ID and HEADER tags, but recommends simple tables only
- Techniques for Accessible HTML Tables - Discusses which tags are supported now
- Made For All - ID and HEADER tags
- Semantic XHTML Table Markup - HEADER, ID and COLGROUP
- W3C Recommended Tags - Some may or may not work in screen readers.
One option may be to break up a complex table into a series of linked simple tables which can be more easily maintained. These tables may also be more usable for the general audience.
Site Menu:
Home Page/Main Menu
| Section 508 Guidelines
| Quick Checklist
| Details by Tag
| Links
| I.T.S. Seminar Page
| Sitemap
©1999-2006 Pennsylvania State University.
This Web page is hosted by (by Teaching and Learning with Technology, a unit of Information Technology Services. Please contact the Webmaster if you have any questions.