Accessible Tables

Jason Morningstar

UNC Chapel Hill | ITS Communications | Web Services

Goals

The difference between layout and data tables
Data table markup - headers, scope, and id
Using Caption and summary
Other issues to consider

Layout Tables

Layout tables are not evil, but they are deprecated.
Layout tables are easily parsed by most screen readers and present few accessibility challenges. However, use only

<table></table>, <tr></tr>, and <td></td> elements. Plus an empty summary. That's it!
Accessibility-related table markup: Don't do it for layout tables! “If a table is used for layout, do not use any structural markup for the purpose of visual formatting.” -- WAI

More on Layout Tables

Use "Empty summary" for validating layout tables, like "empty ALT" for images.
Use relative rather than absolute values.
Table borders have no access issues. Color use, however, does!
Consider using CSS or other tools to separate content from presentation instead of using layout tables.

Tabular Data

Data tables, as opposed to layout tables, present information in a matrix, and have column and rows that show the meaning of the information in the grid.
You don't need to be blind to get thoroughly lost in a complex data table.
In order for a data table to be accessible, it must have proper markup.

Using the <th> and <td> Tags

You must designate row and/or column headers. The <td> tag is used for table data cells and the <th> tag is used for table header cells.

Header Example

The column headers (<th>) for this table are Name, Age, and Birthday. The row headers (<td>)are Jackie and Beth.

Shelly's Daughters
Name	Age	Birthday
Jackie	5	April 5
Beth	8	January 14

Associate Data Cells With Headers

Now that you've created headers, associate the cells with the appropriate headers. There are two ways - The easy way, and the hard way!

SCOPE: The Easy Way!

The scope attribute should be used on simple data tables.
The scope tag tells the browser and screen reader that everything under the column is related to the header at the top, and everything to the right of the row header is related to that header.

SCOPE Example

<table border="1" align="center">
<caption>Shelly's Daughters</caption>
<tr>
<th scope="col" >Name</th>
<th scope="col" >Age</th>
<th scope="col" >Birthday</th>
</tr>
<tr>
<th scope="row" >Jackie</th>
<td>5</td>
<td>April 5</td>
</tr>
<tr>
<th scope="row" >Beth</th>
<td>8</td>
<td>January 14</td>
</tr>
</table>

ID: The Complicated Way

This method should only be used when there is more than one logical level in a table, and when it is necessary to link more than two headers with a data cell. If we extend our original example, we can create a table that fits this criterion. In the table on the next slide, data have three headers each, so it is appropriate to use a more complex technique.

ID Example, Part One

Shelly's Daughters
	Name	Age	Birthday
by birth	Jackie	5	April 5
by birth	Beth	8	January 14
by marriage	Jenny	12	Feb 12

ID Example, Part Two

<table border="1">
<caption>
Shelly's Daughters
</caption>
<tr>
<td> </td>
<th id="name">Name</th>
<th id="age">Age</th>
<th id="birthday">Birthday</th>
</tr>
<tr>
<th rowspan="2" id="birth">by birth</th>
<th id="jackie">Jackie</th>
<td headers="birth jackie age">5</td>
<td headers="birth jackie birthday">April 5</td>
</tr>
(SNIP)

Beware!

Don't use this method in simple tables where the scope attribute will work.
Watch out: spanned rows and columns are not handled well by the JAWS screen reader. If at all possible, avoid complex data tables, or represent the data in a way that is less complex, preferably with no more than two headings applying to a single data cell.

Absolute Vs. Relative Values

Let the browser window determine the width of the table whenever possible, to reduce the horizontal scrolling required of those with low vision.

Use the <caption> Tag!

Use the caption tag, right after the opening <table> tag, like this:

<table border="1" align="center">
<caption>Shelly's Daughters</caption></li>
It is not absolutely necessary to have caption tags on every data table for the sake of accessibility, but it is still a good practice.

More on <caption>

Using CSS, you can also assign alignment to left or right along with the top and bottom alignments built into the caption element. caption { font-size: smaller; text-align: center }
Counter example for grey area between layout and data: the use of a single-cell table to hold a photograph. In that case, the use of the caption element is warranted; the caption genuinely is a caption in that instance.

The <summary> Attribute

It’s the only HTML tag that is forbidden to manifest itself visually. “This attribute provides a summary of the table’s purpose and structure for user agents rendering to non-visual media such as speech and Braille.” Cool, huh?

More on <summary>

Summary should be succinct. “When an appropriate markup language exists, use markup rather than images to convey information,” ... “Mark up documents with the proper structural elements.... [U]sing presentation markup rather than structural markup to convey structure (e.g., constructing what looks like a table of data with an HTML pre element) makes it difficult to render a page intelligibly to other devices.”
Summaries are easy to write. Just ask yourself “What is this table for?” and write that down in a concise sentence. If you can't, add a link to explanatory text or include it in the body of your page.

In <summary>...

Use an empty summary attribute for layout tables, summary=" ", for validators.

Other Issues on the Table (Sorry)

Nested tables - "...by using nested tables, you conscript blind visitors into debugging the coding of your page by audio alone." -- Joe Clark
Only use nested tables when strictly necessary. "To make it prettier" isn't strictly necessary. Try using separate tables, CSS, etc. to achieve your goal.
Try using lynx or another linearization tool to determine if your table could stand to be revised due to complexity..

Handy Links

Contact me at jason_morningstar@unc.edu
UNC's accessibility site
WebAIM's table tutorial, from which I borrowed for this presentation