Two simple steps that improve the accessibility of data tables are
- use table headers appropriately
- use the scope attribute with table headers
The table header tag is <th>. You can assign a <th> element to the any column or row in a table where appropriate. Any row or column with a <th> can be given the attribute scope, which defines whether the heading is associated with a row or a column.
Here is some abbreviated example code for a three column table. Each row would contain a chapter number, title, and author’s name:
<table>
<caption>InterACT with Web Standards Contents and Authors</caption>
<tr>
<th scope="col">Chapter Number</th>
<th scope="col">Chapter Title</th>
<th scope="col">Author's Name</th>
</tr>
<tr>
<th scope="row">1</th>
<td>InterACT</td>
<td>Leslie Jensen-Inman</td>
</tr>
. . .
</table>
CSS can be used to style <th> and <td> elements any way you want. The default browser style is bold and centered for <th>. More important than appearance, however, is the semantic meaning carried by the <th> element with a scope attribute. It provides additional information about the data in the table that clarifies its meaning and purpose. It associates the data in a row or column with the title in the row or column header.
If the example table were finished, it would contain 26 rows. In a long table such as that, strong semantic clues to meaning in the markup add important accessibility helps that benefit all users. I’m not saying this right—even in a small table, semantic markup is important.
Table headers with scope attributes are one piece of table accessibility best practice.
Can you please explain why the scope attribute is so important to use? I understand that this is a best practice method, but why? Does it have anything to do with Meta data, search functions, graceful degradation, or later enhancements of table data? Forgive me for being clueless, but it seems like just more code for the browser to have to deal with.
I recently attended a conference where I learned that WCAG 2.0 does not require a scope attribute on TH elements in simple tables. If the table gets really complicated, ids and headers are recommended. A complicated table might have several colspans or rowspans that create a situation where more than one obvious TH for a column or row might apply to a particular individual TD. For simpler tables you don’t need either.