Making Accessible Websites for the United Nations

Textual Content

Data Tables

Layout and Data Tables

  • Layout table: Table used to control the display of elements in a page.
  • Data table: Table used to display tabular data, which is logically organised into rows and columns, as in an Excel spreadsheet.

WAI Definition (Checkpoints 5.1, 5.2 and 5.5)

For data tables, identify row and column headers.

For data tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells.

Provide summaries for tables.

Explanation

When using tables to display data, it is necessary to identify row and column headers in order to offer a logical flow of navigation. The labels enable a screen reader to read the information in a coherent order.

For data tables that have multiple levels of row or column headers, markup must be used to associate data cells and header cells.

The "summary" attribute describes the table's purpose structure and purpose to screen-reader users. It is not visible on screen.

Rationale

Tables constitute a complex environment for blind or visually-impaired users because they cannot visualize it globally, which would enable them to understand its structure more easily.

It is therefore necessary to add markup that will guide screen-reader users in the navigation of the table.

Technique

The "summary" attribute is used within the <table> tag to describe the elements and structure of the table. "Summary" attributes belong inside the <table> tag itself.

Examples

1. If the table has one logical level
Name Department Extension Room
Peter Johnson DPI 7.1234 S-1001
Wei Zhang DPKO 3.9876 DC2-534

This first table would be coded as follows:

<table summary="List of staff members with Department, extension and room number">
  <tr>
    <th>Name</th>
    <th>Department</th>
    <th>Extension</th>
    <th>Room</th>
  </tr>
  <tr>
    <td>Peter Johnson</td>
    <td>DPI</td>
    <td>7.1234</td>
    <td>S-1001</td>
  </tr>
  <tr>
    <td>Wei Zhang</td>
    <td>DPKO</td>
    <td>3.9876</td>
    <td>DC2-534</td>
  </tr>
</table>
2. If the table has more than one logical level
  Meals Hotels Transport Trip Totals
San Jose
25-Aug-07 37.74 112.00 45.00  
26-Aug-07 27.28 112.00 45.00  
Subtotals 65.02 224.00 90.00 379.02
Seattle
27-Aug-07 96.25 109.00 36.00  
28-Aug-07 35.00 109.00 36.00  
Subtotals 131.25 218.00 72.00 421.25
Totals

This second table would be coded as follows:

<table summary="This table presents the costs of meals, hotels and transports for two trips in San Jose and Seattle">
  <tr>
    <td>&nbsp;</td>
    <th id="meals">Meals</th>
    <th id="hotels">Hotels</th>
    <th id="transport">Transport</th>
    <th id="triptotals">Trip Totals</th>
  </tr>
  <tr>
    <th colspan="5" id="san_jose">San Jose</th>
  </tr>
  <tr>
    <td id="aug-25-07" headers="san_jose">25-Aug-07</td>
    <td headers="san_jose aug-25-07 meals">37.74</td>
    <td headers="san_jose aug-25-07 hotels">112.00</td>
    <td headers="san_jose aug-25-07 transport">45.00</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td id="aug-26-07" headers="san_jose">26-Aug-07</td>
    <td headers="san_jose aug-26-07 meals">27.28</td>
    <td headers="san_jose aug-26-07 hotels">112.00</td>
    <td headers="san_jose aug-26-07 transport">45.00 </td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th id="sub" headers="san_jose">Subtotals </th>
    <td headers="san_jose sub meals">65.02</td>
    <td headers="san_jose sub hotels">224.00</td>
    <td headers="san_jose sub transport">90.00</td>
    <td headers="san_jose triptotals">379.02</td>
  </tr>
  <tr>
    <th colspan="5" id="Seattle">Seattle</th>
  </tr>
  <tr>
    <td id="aug-27-07" headers="Seattle">27-Aug-07</td>
    <td headers="Seattle aug-27-07 meals">96.25</td>
    <td headers="Seattle aug-27-07 hotels">109.00</td>
    <td headers="Seattle aug-27-07 transport">36.00</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td id="aug-28-07" headers="Seattle">28-Aug-07</td>
    <td headers="Seattle aug-28-07 meals">35.00</td>
    <td headers="Seattle aug-28-07 hotels">109.00</td>
    <td headers="Seattle aug-28-07 transport">36.00 </td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th id="sub2" headers="Seattle">subtotals</th>
    <td headers="Seattle sub meals">131.25</td>
    <td headers="Seattle sub hotels">218.00</td>
    <td headers="Seattle sub transport">72.00</td>
    <td headers="Seattle triptotals">421.25</td>
  </tr>
  <tr>
    <th id="grandtotals">Totals</th>
    <td headers="grandtotals meals">196.27</td>
    <td headers="grandtotals hotels">442.00</td>
    <td headers="grandtotals transport">162.00</td>
    <td headers="grandtotals triptotals">800.27</td>
  </tr>
</table>

Validation

If the table has one logical level:
Test

Using the Firefox Web Developer's Toolbar (plugin):
Go to Information > Display table information

Success Criteria

Data tables have column and/or row titles (tagged as <th> instead of <td>), and a "summary" attribute, describing the structure of the table.

If the table has more than one logical level:
Test

Check the code of the page.

Success Criteria

Headers and cells are associated using the "id" and "header" attributes.