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

  1. 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."
  2. Avoid spanned rows and columns in data tables, especially as headers. Many screen readers cannot properly parse these.
  3. Make sure any abbreviations and acronyms used in the tables are accessible.
  4. 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)

Top 2008 Presidential Candidates by Party
(num) = Primary Delegate Count
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 Names in Multiple Languages
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:

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 Names in Multiple Languages
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>....&lt/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

Old English Consonant Codes
Cns Entity Code Character Name
Ð &ETH; (208) Capital Eth
ð &eth; (240) Lower Eth
Þ &THORN; (222) Capital Thorn
þ &thorn; (254) Lower Thorn
Ƿ &#503; Capital Wynn
ƿ &#447; Lower Wynn
Ȝ &#540; Capital Yogh
ȝ &#541; 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.

WARNING: It is recommended that these tables be tested in multiple screen readers. Not all screen readers may support these options equally.

Top of Page