Web Accessibility

Tables

Meeting WCAG 2.0

A To claim Single A conformance, all of your pages and documents must meet all Single A requirements for all content

A A To claim Double A, all of your pages and documents must meet all Single A and all Double A requirements

A A A To claim Triple A, all of your pages and documents must meet all Single A, Double A and Triple A requirements

About tables and accessibility

There are two ways tables are used in webpages; data and layout tables. Data tables contain information that benefits from two-dimensional presentation and has column and row headers. Layout tables are used to position page content, certainly before CSS became widespread. Accessibility issues occur because both types of tables use the same code in the background, but table code was designed for data tables. One of the issues is that screen readers read the content across each row of the table. Unless some thought has been been put into how the table is populated, specially for layout tables, the content may not make sense when read out this way.

Using tables for layout

Layout tables are not prohibited by WCAG2.0, but content layout is better managed with style sheets. If you want to use a layout table, please contact Web Services, who will be able to show you alternatives. However, some development environments for software packages rely on tables for layout (an example is Oracle Apex). Again, please contact Web Services for advice.

However, if the table is correctly used for data, with identifiers for each row and column, screen reader users can interogate each cell and get the row and column information. For a detailed explanation of table accessibility, WebAIM has good information.

Single A

Making tables

Tables should be used for tabular data rather than page layout. Additional information can be added by using the th (table header) tag to replace some of the td or table data tags. In this example, the cells with times and days of the week are all th.

Table headers

Example of a table with table headers

Monday Tuesday Wednesday Thursday Friday
8:00-9:00 Meet with Sam
9:00-10:00 Doctor Williams Sam again Leave for shack

Code for this table:

<table border="1" summary="Weeks Activities">
<tr>
<td> </td> <th>Monday</th> <th>Tuesday</th> <th>Wednesday</th> <th>Thursday</th> <th>Friday</th>
</tr>

<tr>
<th>8:00-9:00</th> <td>Meet with Sam</td> <td> </td> <td> </td> <td> </td> <td> </td>
</tr>

<tr>
<th>9:00-10:00</th> <td> </td> <td> </td> <td>Doctor Williams</td> <td>Sam again</td> <td>Leave for San Antonio</td>
</tr>
</table>

Note that the blank top left cell is not a header cell.

Id and header

Using id and header attributes to associate data cells with header cells, for tables where data cells are associated with merged header cells or row cells

Example of table needing id and header attributes

Homework Exams Projects
1 2 Final 1 2 Final
15% 15% 15% 20% 10% 10% 15%

Code for this table:

<table border="1" summary="sample table with merged cells">
<tr>
<th rowspan="2" id="h">Homework</th>
<th colspan="3" id="e">Exams</th>
<th colspan="3" id="p">Projects</th>
</tr>
<tr>
<th id="e1" headers="e">1</th>
<th id="e2" headers="e">2</th>
<th id="ef" headers="e">Final</th>
<th id="p1" headers="p">1</th>
<th id="p2" headers="p">2</th>
<th id="pf" headers="p">Final</th>
</tr>
<tr>
<td headers="h">15%</td>
<td headers="e e1">15%</td>
<td headers="e e2">15%</td>
<td headers="e ef">20%</td>
<td headers="p p1">10%</td>
<td headers="p p2">10%</td>
<td headers="p pf">15%</td>
</tr>
</table>

In tables used for layout, the summary can be blank: summary="".

Making the purpose of your tables clear

To add more information to your data table

  • Use the table caption to describe the table; this caption will appear on the page
  • Use the table summary, which will not appear on the page but is read out by screen readers. All data tables should have a summary

The table summary is useful when the table is complex. Both the caption and summary can be present, but they should not have the same text, as this will repeat the information read out by a screen reader. In tables used for layout, the summary can be blank: summary="".

Layout tables should not contain table headers, summary (unless blank) or a caption.

Operating tables in a webpage

Tables themselves are not hard to 'drive' in a webpage, as long as the content makes sense when read across each row, the table will make sense to people using screen readers.

Reading order is important for tables containing links in table cells, but the context of the link in the cell, which includes the text in the cell and its associate heading, should make sense.

Double A

No specific requirements.

Triple A

No specific requirements.