Academic Computing Media Services

Tables with single levels of column and/or row headings are significantly easier for screen reader users to understand and use. So wherever possible, complex tables with multiple levels of headings should be avoided.

Sometimes however, complex tables are required. Some data tables, for example scientific tables or those of financial institutions, often require more than one level of row and/or column heading. Once again, most people who are able to access the table visually will not find this a problem. However assistive technologies also need to be able to associate these extra levels of headings with the information contained in the data cells.

The two most commonly recommended ways to mark up tables with two or more levels of headings are:

HTML 4 introduced the 'headers' attribute for table cells <td>. This attribute is used in conjunction with the id attribute within a table heading <th> to allow any cell or cells to be associated with a heading or headings.

The following table, which is from the table test page, for orange and apple prices uses id and headers.

The use of id and headers means that most people who rely on screen readers will be able to obtain the answer to this question. The source code for part of this table with the relevant id and headers highlighted follows:

<table border="1" summary="Wholesale and retail prices of imported and domestic oranges and apples in California and Nevada. There are two levels of column headings.">
   <caption>
      Imported and domestic orange and apple prices in California and Nevada
   </caption>
   <thead>
      <tr>
         <td></td>
         <th colspan="2" id="imported">Imported</th>
         <th colspan="2" id="domestic">Domestic</th>
      </tr>
      <tr>
         <td></td>
         <th id="oranges-imp">Oranges</th>
         <th id="apples-imp">Apples</th>
         <th id="oranges-dom">Oranges</th>
         <th id="apples-dom">Apples</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <th id="sydney" colspan="5">California</th>
      </tr>
      <tr>
         <th headers="sydney" id="wholesale-california">Wholesale</th>
         <td headers="imported oranges-imp california wholesale-california">$1.00</td>
         <td headers="imported apples-imp california wholesale-california">$1.25</td>
         <td headers="domestic oranges-dom california wholesale-california">$1.20</td>
         <td headers="domestic apples-dom california wholesale-california">$1.00</td>
      </tr>
      <tr>
         <th headers="california" id="retail-california">Retail</th>
   ...THE REST OF THE TABLE CODE ...

Using a combination of JAWS keyboard commands, most users will be able to locate the cell that is likely to contain the information they require. They can confirm this is the correct cell by asking JAWS to "say the current cell".

If the focus is on the appropriate cell ($1.25), JAWS will "say the current cell" like this:

The use of scope, in association with col and colgroup, is often promoted as an effective way of grouping the headers and information in a column in order to enhance accessibility.

The table test page contains the following "Brass and steel nuts and bolts" table, which uses scope, col and row.

The following section of source code for this table indicates what I believe is the way the scope, col and row attributes are used to provide the answer to this question.

<table border="1" summary="Wholesale and retail prices for 10 and 20 centimeter brass and steel nuts and bolts. There are two levels of column headings.">
   <caption>Prices of Brass and Steel nuts and bolts</caption>
   <colgroup>
   <colgroup span="2">
   <colgroup span="2">
   <thead>
      <tr>
         <td></td>
         <th scope="colgroup" colspan="2">Brass</th>
         <th scope="colgroup" colspan="2">Steel</th
      </tr>
      <tr>
         <td></td>
         <th scope="col">Bolts</th>
         <th scope="col">Nuts</th>
         <th scope="col">Bolts</th>
         <th scope="col">Nuts</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <th scope="rowgroup" colspan="5">10cm</th>
      </tr>
      <tr>
         <th scope="row">Wholesale</th>
         <td>$1.00</td>
         <td>$1.25</td>
         <td>$1.20</td>
         <td>$1.00</td>
      </tr>
      <tr>
         <th scope="row">Retail</th>
... THE REST OF THE TABLE CODE ...

It does not appear possible for a screen reader user to obtain the "wholesale price of 10cm brass nuts" from this table, which is marked up using scope.

With the focus on the appropriate cell ($1.25), JAWS 5.1 will "say the current cell" like this:

The <thead>, <tbody> and <tfoot>
For simple tables, the appropriate use of the <th> element described above is all that is required to make a table accessible. With just a little more effort however, we can we can further enhance the accessibility of data tables.

HTML provides these elements so that the rows of a table can be grouped together and presented in three different sections;

<thead> and <tfoot> can be used to provide a row of headings at the top and bottom of a table. These are potentially very useful for long tables that extend over more than one page since they enable the header and footer to be printed on each page. Also, with appropriate browser support, they will allow the body of a table to be scrolled independently while the headings remain on the screen. In the future, this is likely to be very useful for users of handheld devices with small screens.

If <thead> and <tfoot> are used you must also use <tbody> to define the body of the table, that is the part of the table that contains the actual data cells. In fact a table can have more than one <tbody>.