Using Data Tables

General comments

Tables are typically used to display numeric or statistical information or other data which is tabular in nature.  They should be developed with accessibility in mind.

General/Specific Guidelines

Tables present unique problems for people with disabilities who use assistive technologies such as screen readers.  

In order to make sense of the data, the screen reader must understand the significance of each cell in the overall scheme of the table, i.e. how each piece of data relates to the row and column headings.  This is easy for the sighted user.  But Most screen-reading software typically defaults to standard reading protocols, generally beginning to read at the top left of the screen and moving left to right, dropping down one row at a time.

Consider the table below:

Wages for Summer 2000
  June July August
Mark   $360.30 $720.59
Judy $180.15    
Bill $720.59 $720.59  
Trina $720.59 $720.59 $720.59

Someone using a screen reader to "see" the table above may hear:

"Wages for Summer 2000 June July August Mark $360.30 $720.59 Judy $180.15 Bill $720.59 $720.59 Trina $720.59 $720.59 $720.59." (Listen to the table as read by a Screen Reader application)

How would that person be able to tell, for example, the months in which Mark, Judy, or Bill worked?

To solve this problem, Web developers should use several HTML attributes to make HTML tables accessible. For example:

    • The "Summary" attribute helps users using speech and braille assistive technology to better understand the table,
    • The "id", "headers" attributes can be used to identify rows and headers information within each cell.
    • The "Scope" attribute makes the data cell behave like a row header cell. It specifies the set of data cells and can be used in place of the "header" attribute to allow assistive technologies (readers) provide the relevant header immediately before the cell's content. The scope attribute also makes the table renderable on wireless browsers such as mobile phones and PDA’s (as the values include "rows cols, "rowgroup" and "colgroup").

These greatly assist users with visual disabilities.

To see how this would be done for the table shown above, view the source code below:


<table width="50%" border="1" align="center" cellpadding="2" summary="This table depicts the wages for summer 2000 (June, July and August) for Mark, Judy, Bill and Trina.">
<tr valign="top">
<th colspan="4"> <center>
<strong> <a name="Table1" id="Table1"></a>Wages for Summer 2000 </strong>
</center></th>
</tr>
<tr>
<th id = "name">&nbsp;</th>
<th id = "June">June</th>
<th id = "July">July</th>
<th id = "August">August</th>
</tr>
<tr valign="top">
<td headers="name"><strong>Mark</strong></td>
<td headers="June">&nbsp;</td>
<td headers="July">$360.30</td>
<td headers="August">$720.59</td>
</tr>
<tr valign="top">
<td headers="name"><strong>Judy</strong></td>
<td headers="June">$180.15</td>
<td headers="July">&nbsp;</td>
<td headers="August">&nbsp;</td>
</tr>
<tr valign="top">
<td headers="name"><strong>Bill</strong></td>
<td headers="June">$720.59</td>
<td headers="July">$720.59</td>
<td headers="August">&nbsp;</td>
</tr>
<tr valign="top">
<td headers="name"><strong>Trina</strong></td>
<td headers="June">$720.59</td>
<td headers="July">$720.59</td>
<td headers="August">$720.59</td>
</tr>
</table>

Now, someone using a screen reader to access the table above would hear:


Wages for Summer 2000
Mark: June (blank) Mark: July $360.30 Mark: August $720.59
Judy: June 180.15 Judy: July (blank) Judy: August (blank)
Bill: June $720.59 Bill: July $720.59 Bill: August (blank)
Trina: June $720.59 Trina: July $720.59 Trina: August $720.59
(Listen to the table as read by a Screen Reader application)

 

Preformatted Tables Using the <PRE> Tag

The PRE element indicates text that has been formatted for the screen and is rendered using a fixed-width font. All whitespace characters are interpreted literally and retained in display (including multiple spaces, tabs, carriage returns and linefeeds.) Normally, parsing behavior in HTML collapses multiple spaces, tabs, CRs, or linefeeds to a single space. A table formatted for the screen may simply be "typed in,".  Here is an example:

          Wages for Summer 2000
          June     July     August
Mark               $360.30  $720.59
Judy      $180.15
Bill      $720.59  $720.59
Trina     $720.59  $720.59  $720.59
            

To the sighted Web user, this is a plain version of the previous table.  But to someone using a screen reader, this table is rendered as:

"Wages for Summer 2000 June July August Mark $360.30 $720.59 Judy $180.15 Bill $720.59 $720.59 Trina $720.59 $720.59 $720.59."  

As noted earlier, this is not very useful.

Table Accessibility Checklist

    • Use the "id" attribute of the <TH> tag to identify columns and the "headers" attribute of the <TD> tag to link cells to those columns.
    • Avoid using tables simply for formatting paragraphs of text.  Some screen readers have trouble reading table cells that include multi-line text.
    • Use the <TABLE> tag's "summary" attribute to include a meaningful description of the table's purpose and structure.
    • Use the "Caption" element to provide a brief description of the table

W3C/WAI Guidance on Rules g and h

Department of Commerce Web Advisory Council (WAC)
U.S. Department of Commerce

Send questions and comments about this page to WAC@doc.gov
Page last updated October 12, 2010