Tables

Tables can be made accessible in one of two ways: 1) by making them linearize correctly (left to right, top to bottom in order), making sure that cells don't overlap (or span) multiple columns, or 2) by assigning table headers and/or rows to each cell. This is especially true for tables containing data.

Content must be labeled to give visually impaired users a sense of context, since they are not able line up columns and rows. That additional information is provided by I D and Headers, or Scope attributes in simple tables (single row of headings) and by T head and T body tags that associate headers with columnar data in complex tables (tables with multiple rows of headings). An example of a simple table is the site map for this website.

In addition to information describing rows and columns, tables will be more accessible with additional code describing their purpose and appropriate tab order.

Simple Tables

Code Example Using ID and Headers attributes:

<tr>
      <th id="category1">Tutorial</th>
      <th id="category2">Formats</th>
</tr>

<tr>
      <td headers="category1">Introduction</td>
      <td headers="category2">Stylesheets</td>
</tr>

Code Example Using Scope Attribute

<tr>
      <th scope="col">Tutorial</th> 
      <th scope="col">Formats</th> 
</tr>

<tr> 
      <td>Introduction</td> 
      <td>Stylesheets</td>
</tr>

Complex Tables

Complex tables are tables with more than one row describing table content, as in the case of a bus schedule where the top row contains headers describing direction ("Northbound" and "Southbound") and the second row describes intersections where the bus stops ("Sixth & Congress," "Eleventh & Congress," etc.). These two rows are enclosed by a "T head" tag. Information about when the bus arrives is contained in columns below each header.

<thead>
  <tr>
         <th colspan="6" id="dir">Northbound</th>
  </tr>
  <tr><th id="intersection1">Sixth & Congress</th>
         <th id="intersection1">Eleventh & Congress</th>
         <th id="intersection1">Twelfth & Lavaca</th>
         <th id="intersection1">Fifteenth & Lavaca</th>
         <th id="intersection1">Martin Luther King & Lavaca</th>
         <th id="intersection1">Twenty-fourth & Guadalupe</th>
  </tr>
</thead>

<tbody>
  <tr>
         <td headers="dir intersection1">10:33am</td>
         <td headers="dir intersection1">10:36am</td>
         <td headers="dir intersection1">10:42am</td>
         <td headers="dir intersection1">10:45am</td>
         <td headers="dir intersection1">10:50am</td>
         <td headers="dir intersection1">10:55am</td>
  </tr>
</tbody>

This example is taken from "Maximum Accessibility," by Dr. John Slatin and Sharron Rush, Pearson Educational, 2003.

Additional Code

Since screen readers move from left to right, row to row, across a table, it is helpful to set Tabindex attributes for links so that they tab down from headers rather than across. Be sure to tell visually impaired users about table content by using a Summary attribute so they can get an overview. Note, however, that is good form to use summary tags only for tables containing data. It is unnecessary and cumbersome to describe the structure of a table used for layout. Additional information including a Caption attribute and Title attribute (if there are links) is also important as shown below.

Code Example:

<table width="80%" 
summary="This site map has seven columns that reflect 
the main content categories of the site. 
The first row corresponds to categories and the following nine 
rows contain subpages. Tabs have been set to read down columns. 
Each cell contains a link.">

<caption align="top">Map of Accessibility Website</caption>
<tr>
<th id="category1">How To</th>
<th id="category2">Formats</th>
</tr>

<tr>
<td headers="category1">
<a href="Introduction.html" 
tabindex="21" title="Introduction to accessibility">
Intro</a>
</td>
<td headers="category2">
<a href="CSS.html" tabindex="31" 
title="C.S.S./Stylesheets information">
Stylesheets</a>
</td>
</tr>

<tr>
<td headers="category1">
<a href="Basic.html" tabindex="22" 
title="Basic information about accessibility">Basics</a>
</td>
<td headers="Category2">
<a href="Flash.html" tabindex="32" 
title="Flash and accessibility">Flash</a>
</td>
</tr>

Note how the numbering for categories and tabindexes move in parallel and across the page.

Adaptive Technology

Home Page Reader will read row and column headings if you press Alt + T. Jaws will read the Row and Column number of the current cell if you press Alt + Ctrl + NumKeypad 5. In this example, JAWS will read the content of the first cell in the row and the current cell: "row 1, column 1, How to Intro." JAWS 4.5 also recognizes tabindex attributes.