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:
<caption>InterACT with Web Standards Contents and Authors</caption>
<th scope="col">Chapter Number</th>
<th scope="col">Chapter Title</th>
<th scope="col">Author's Name</th>
. . .
CSS can be used to style
<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.