Page Content
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.
Synopsis
- When using tables to present data, 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.
WCAG 2.0 Guideline 2.4.6—"Headings and labels describe topic or purpose."
WCAG 2.0 Guideline 1.3.1 – "Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text." - Avoid spanned rows and columns in data tables, especially as headers. Many screen readers cannot properly parse these.
- 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 are needed to further organize information in complex data tables.
Given the complexity of this tag set however, you may want to 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.
Simple Tables vs. Complex Tables
A simple table here means that there is a maximum of one header row and one header column where a header column specifies the type of information in the column. In addition, there are no merged cells within a simple table. Below are examples of simple and complex tables. Because screen readers present information linearly (i.e. table cell by table cell), it is generally easier to parse tables when they are set up as simple tables.
Simple Table (More Accessible)
| Rank | Democratic | Republican |
|---|---|---|
| 1 | Barak Obama (1828.5) | John McCain (1575) |
| 2 | Hilary Rodham Clinton (1726.5) | Mike Huckabee (278) |
| 3 | John Edwards (4.5) | Mitt Romney (271) |
Complex Table (Less Accessible)
| Top Presidential Candidates 2008 | |||||||
|---|---|---|---|---|---|---|---|
| Democratic | Republican | ||||||
| Name | Del | Name | Del | Name | Del | Name | Del |
| Obama | 1828.5 | Clinton | 1726.5 | McCain | 1575 | Huckabee | 278 |
TH and SCOPE
When sighted users focus on a table cell, they are able to visually determine which row and column the cell is in by scanning up and down or left and right. This adds context to what the value in a particular cell means.
On the other hand, a screen reader can only read aloud each cell one by one from left to right top to bottom. There is no easy way to determine what label a particular value in a cell might have.One way to help blind users process the information is to read out what row and column header each cell refers to before the value is read. This can be done using the TH tag with SCOPE attribute.
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, but the TH tag can be formatted with CSS.
The SCOPE attribute in the TH tag is used to further define whether the header (TH cell) is at the top of a column ( <th scope="col"> ) or the first cell in a row. ( <th scope="row"> ).
In the table below, the headers are the top row (color names) and the left column (language names). Once TH cells are identified with the proper scope, a screen reader can announce the associated headers with each cell. For instance, in the language color name table below, the cell containing gwyn would be read as Language: Welsh, Color: White gwyn.
Examples of TH and SCOPE
| 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: Gray cells with bold, centered text are TH. The gray background is
from a style sheet.
In Screen Readers
Because this table contains TH tags
with the proper SCOPE definitions,
some screen readers will read the second row of the table as follows.
black, Spanish: negro
black, French: noir
black, Irish: dubh
black, Welsh: du
View the Code
<table summary="Color names for black, white, red, blue, green, yellow in multiple languages">
<caption> Color names in multiple languages</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>
Without TH and SCOPE
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…
Alternatives to TH/SCOPE
Some alternatives to TH/SCOPE may also perform the same function, but may either be more difficult to implement or may not work in as many screen reader tools. But they may be a viable solution in some cases. Specific alternatives include:
- ARIA <td role="columnheader/rowheader">
Note: This has been tested and works at least in modern screen readers which support ARIA
CAPTION Tag
The CAPTION tag can be used to display a title for a table. The caption can be visually formatted and positioned above or below the table as needed. See the full Color Language table for an example of CAPTION above the table. The example below shows how to align the caption beneath the table.
CAPTION Below Table
| 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 |
View the Code
<table class="chart">
<caption> align="bottom&;gt;Color Names in Multiple Languages</caption>
<tr>....</tr>
SUMMARY Tag
The SUMMARY attribute is placed within the TABLE tag, and is read only by screen readers. It can be used to clarify the organization of a table, or to provide a quick summary of the table’s content. It shouldn’t repeat the information in the CAPTION tag, but can be used to supplement that information.
For instance in the chart of HTML entity codes for Old English consonants, the SUMMARY tag indicates that the abbreviation “Cns” means consonant.
Caption vs. Summary
| Cns | Entity Code | Character Name |
|---|---|---|
| Ð | Ð (208) | Capital Eth |
| ð | ð (240) | Lower Eth |
| Þ | Þ (222) | Capital Thorn |
| þ | þ (254) | Lower Thorn |
| Ƿ | Ƿ | Capital Wynn |
| ƿ | ƿ | Lower Wynn |
| Ȝ | Ȝ | Capital Yogh |
| ȝ | ȝ | Lower Yogh |
Partial Code
<table class="chart" cellspacing="0" summary="Old English consonants in Cns column. Some symbols may not be read aloud, but are specified in cell with the HTML entity code">
<caption>Old English Consonant HTML Entity Codes</caption>
Accessibility Tags for Complex Layouts
It is possible to structure complex tables to be accessible via the ID and HEADER attributes, but it is very time consuming to implement. Each cell within a table must be manually coded with an identification of the row and column of each cell.
See the Complex Table Example page for examples of coding complex tables.
An easier 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.
W3C Complex Table Code Samples
See the W3C Tables Tutorial for examples of the use of COLGROUP/ROWGROUP and ID/HEADERS.