Creating Accessible Data Tables
or, How I Learned to Stop Worrying
and Love the Scope Attribute
One of the provisions of the Section 508 guidelines that provokes numerous questions and a sizable number of headaches is the provision dealing with data tables. In fact, there are two:
g. Row and column headers shall be identified for data tables. (WCAG 1.0 checkpoint 5.1)
h. 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. (WCAG 1.0 checkpoint 5.2)
It sounds difficult. It sounds complicated. It isn't. In fact, it's pretty easy. But before we discuss how to make tables accessible, let's examine why we need to:
Basic data tables
The purpose of a data table is to arrange levels of information into coherent rows and columns so that it can be easily understood. When a voice browser reads a data table, it must be able to associate row and column headers with the table's data, otherwise the data will be read out as a series of numbers without context or meaning. Here's an example, using fruit and detectives (past and present) from TV's "NYPD Blue:"
| Customer | Apples | Pears | Oranges |
|---|
| Simone | 10 | 5 | 10 |
| Sorensen | 6 | 20 | 3
| | Sipowicz | 10 | 15 | 15 |
A sighted person can easily see that Danny Sorensen purchased 20 pears, or Andy Sipowicz purchased 15 oranges. But if someone were to read, "Customer Apples Pears Oranges Simone 10 5 10 Sorensen 6 20 3 Sipowicz 10 15 15" to you over the phone, it wouldn't make a whole lot of sense. Particularly if it were a much more complicated table.
What the scope attributes do is associate the data with the headers, so that the voice browser would know that all the data in the second column represents the number of pears sold, or that the first row represents all the fruit sold to Bobby Simone. The voice browser behaves like a spreadsheet, and as users navigate around the table using the arrow keys, the browser will read "Simone - Apples: 10, Pears: 5, Oranges: 10" as the user keys across the row, or "Oranges - Simone: 10, Sorensen: 3, Sipowicz: 15" as the user keys down a column. These associations are created by putting the scope="col" attribute in each column header, and the scope="row" attribute in each row header.
Here's the very simplified code:
<table>
<tr><th scope="col">Customer</th><th scope="col">Apples</th><th scope="col">Pears</th><th scope="col">Oranges</th></tr>
<tr><th scope="row">Simone</th> etc... </tr>
<tr><th scope="row">Sorensen</th> etc... </tr>
<tr><th scope="row">Sipowicz</th> etc... </tr>
</table>
This works fine for simple tables, with one level of information along the x and y axes. But life isn't always that simple. Tables aren't always that simple. Which brings us to:
Complex Data Tables
So. Now you're thinking, "how do I deal with more complex tables?" Good question. Here's a more complex table, using fruits, vegetables, and characters from TV's "NYPD Blue" and "The A-Team:"
| Customer |
Fruits |
Vegetables |
| Apples | Pears | Broccoli | Cucumbers |
|---|
| NYPD Blue |
| Simone | 10 | 5 | 7 | 13
| | Sorensen | 6 | 20 | 5 | 10 |
| Sipowicz | 10 | 15 | 3 | 12 |
|
The A-Team |
| Hannibal | 5 | 10 | 6 | 11 |
| Murdock | 16 | 12 | 2 | 9 |
| B.A. | 8 | 8 | 8 | 12 |
Here, we have several layers of data going on. We have apples, pears, broccoli, and cucumbers, grouped into fruits and vegetables. We also have characters grouped by television show. Some of the coding is the same. For example - the table headers in the second row -- apples, pears, broccoli, and cucumbers -- get scope="col" attributes, and each of the characters gets a scope="row."
Next, we want to group the fruits together and the veggies together. We start the table by defining the columns, using <col /> and <colspan> tags. Single columns get one COL tag. Grouped columns are represented by multiple COL tags surrounded by opening and closing COLGROUP tags. Note that COL is a single tag (like IMG or BR), so the XHTML folks out there will want to give it an ending slash.
Here's the colgroup code:
<table>
<col /><colgroup span="2"><col /><col /></colgroup><colgroup span="2"><col /><col /></colgroup>
The table header cells for "Fruits" and "Vegetables" (which I'm creating as a colspan="2" cell) would have a scope="colgroup" attribute.
First header row code:
<thead>
<tr><th rowspan="2" scope="col">Customer</th><th colspan="2" scope="colgroup">Fruits</th><th colspan="2" scope="colgroup">Vegetables</th></tr>
Second header row code:
<tr><th scope="col">Apples</th><th scope="col">Pears</th><th scope="col">Broccoli</th><th scope="col">Cucumbers</th></tr>
</thead>
Next, we group the rows. This works in a very similar way. The cell containing each show title gets a scope="rowgroup" attribute, and the entire group of rows is encased in <TBODY> tags:
<tbody>
<tr><td scope="rowgroup" colspan="5">NYPD Blue</td></tr>
<tr><td scope="row">Simone</td> etc...</tr>
<tr><td scope="row">Sorensen</td> etc... </tr>
<tr><td scope="row">Sipowicz</td> etc...</tr>
</tbody>
<tbody>
<tr><td scope="rowgroup" colspan="5">The A-Team</td></tr>
<tr><td scope="row">Hannibal</td> etc...</tr>
<tr><td scope="row">Murdock</td> etc... </tr>
<tr><td scope="row">B.A.</td> etc...</tr>
</tbody>
</table>
Keep in mind - this is a very simplified example. It might be easy to keep track of the data when we're talking about fruits and vegetables and Vietnam vets framed for a crime they didn't commit. But when tables start getting into fiscal years, strategic objectives, countries grouped by region, and funding sources, such as the types of tables found on USAID documents, the data can get very complex.
More Info
Some helpful further information links:
If you're still in doubt, or have a table that just looks impossible to make accessible, please contact your friendly neighborhood LPA Web Team Member, and we'll be happy to help you out!
Happy webbing!
Back to Top ^
|
