Skip Main Navigation
Indiana University

Main Content

Web Accessibility Made Easy:
Let's Not Table This… Guidelines for Tables

June 3rd, 2009

This entry in the “Web Accessibility Made Easy” series discusses two guidelines that are essential to well-formatted layout and design of data tables.

Tables on the web have been around since the early days of the web. Okay…not the early, early days of the web, but tables were first discussed in 1996 (IETF RFC 1942) and then later included in the HTML 3.2 specification. This specification ensured that tables were the formalized way to display data from a spreadsheet or database.

Unfortunately, tables soon became the primary way for web designers to layout the elements of an HTML page to create enhanced visual design. Unfortunately, when pages are formatted this way they are linearized by screen-reading technology frequently making them difficult to understand because of the complexity of table-based layout.

This is not to say that tables are unimportant. In fact, some data is best represented using tables. And today most screen-reading technology has scripts that try to differentiate between tables used for layout and tables used for tabular data. Unfortunately these scripts aren’t perfect and sometimes still yield inaccessible results. Also, data appropriately represented in table format can be very complex, incorporating multiple rows and columns with spanning information. This makes accessible interpretation challenging if not impossible. Therefore, formatting tables according to accessibility guidelines is very important.

Making tables more accessible relies on two key elements: table headers and table summaries. Table headers are similar to regular headers because they provide clues about how the information is grouped. For example, header text in tables indicates to screen-reader users the data type contained in that column or row. If the column header text says “Dog Breeds” the column will contain a list of breed types.

Also essential for screen readers are table summaries. They provide an overview of the structure of the table which can be viewed prior to the user venturing into the table itself. In addition, users can quickly review table summaries if they get lost and need to reorient themselves.

Guidelines for Tables

  • Data tables will have well identified row and column headers and data cells will be clearly associated with row and column headings across logical levels.
  • Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers. This guideline is especially important for more complex table.
  • Concise summaries of tables will be provided.

Here are some tips for accessibly coding tables.

First, here is a badly coded, inaccessible, simple table. This coding provides neither a table summary nor headings for rows or columns.

<table width="800" border="1">
<tr>
<td width="10"> </td>
<td width="66"><span class="style1">In 508</span></td>
<td width="109"><span class="style1">in WCAG 1.0</span></td>
<td width="123"><span class="style1">In WCAG 2.0</span></td>
<td width="458"><span class="style1">Guideline</span></td>
</tr>
<tr>
<td><span class="style1">1</span></td>
<td>a</td>
<td>1.1</td>
<td>1.1.1</td>
<td align="right">A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content). </td>
</tr>
<tr>
<td class="style1"><span class="style1">2</span></td>
<td>d</td>
<td>6.1</td>
<td>1.3</td>
<td align="right">Documents shall be organized so they are readable without requiring an associated style sheet.</td>
</tr>
<tr>
<td class="style1"><span class="style1">3</span></td>
<td>g</td>
<td>5.1</td>
<td>1.3</td>
<td align="right">Data tables will have well identified row and column headers and data cells will be clearly associated with row and column headings across logical levels. </td>
</tr>
<tr>
<td class="style1"><span class="style1">4</span></td>
<td>h</td>
<td>5.2</td>
<td>1.3</td>
<td align="right">Need definition of logical levels. Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.</td>
</tr>
</table>

As you can see this table is not the most complex, but without table headers and a table summary, it will be difficult for someone using a screen-reader to understand. Here is how it can be fixed.

1. Table summary coding example.

The code below demonstrates how to create a concise table summary which is functions as a roadmap for the table.

<table border="1" summary="This table contains a sampling of the web accessibility guidelines and shows how each set of guidelines parallels the other. The first column is the number of the item. The second column is the section 508 guideline designation. The third column is the WCAG 1.0 guideline designation. The fourth column is the WCAG 2.0 guideline designation. The fifth column is the guideline itself.">

The table summary is an attribute of the <table> element. The best practice for a table summary is to first describe the contents of the table in general. Then describe the data that is found in each column and row of the table. Because the example table is not very complex, the row descriptions are left out of the summary.

2. Adding the column headers.

The following is an example of coding for column headers.

<tr>
<th width="7">#</th>
<th width="46">In 508<sup><a href="#1">1</a></sup></th>
<th width="79">In WCAG<sup><a href="#2">2</a></sup> 1.0</th>
<th width="81">In WCAG<sup><a href="#3">2</a></sup> 2.0</th>
<td align="center" width="355">Guideline</td>
</tr>

To add column headers, simply change the <td> element, which defines a standard table cell, into a <th> element which makes it a table heading element. Be sure to change the closing element as well to maintain valid HTML. The table header coding above includes width specifiications so the table will be appropriately displayed for those accessing it visually.

3. Adding row headers.

The following is an example of coding for adding row headers.

<tr>
<th>1</th>
<td>a</td>
<td>1.1</td>
<td>1.1.1</td>
<td align="right">A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content). </td>
</tr>

After adding column headers, add headers for each row. For the example table, change only the first <td> element as the subsequent cells in the row contain data. Row headers are not necessarily needed for all tables, but it never hurts to include them.

This is all you need to do to create accessible data tables. Those accessing the table visually will hardly notice a difference; those using screen readers will actually be able to access and understand the tabular data.

Wrap Up

Tables were the primary tool for web page layout in the early days of the web. Today there are much better ways to design and control page layout and presentation. However, tables retain great value for presentation of data best provided in tabular format. Making tables accessible takes little time and requires minimal change to the code. And, most importantly, properly coded tables are understandable to screen reader users. Furthermore, if stylesheets are used, the visual look of the table remains the same.