Tables are often used for representing tabular data on web pages. The structure of a general data table consist of column or row header and the cells against the headers. Some tables may have both column and row headers. Captions which represent the heading for the tables are also observed in few data tables. Few data tables may have a complex structure with more than one header for same cell, content spanning across the data cells.
Looking at the table any user can identify the column / row header and relate the content with the headers. This relation becomes challenge for those who use screen readers. So making data table accessible is an important aspect in ad hearing to web content accessibility guidelines (WCAG (or Section 508.
This article explains the procedure for making a data table accessible using appropriate tags and attributes.
Caption
A caption tag defines the heading of the data table. Web authors often provide a heading for the table outside the table or as part of a cell within the table. Providing a visible heading within the table helps the users understand what the table is talking about at a glance. We often do not see a caption available for data tables. Caption should be the first tag within the table shown as below.
<table>
<caption>Student Marks</caption>
Once the screen reader encounters the table (table with 4 columns and 5 rows) the first content announced is the caption (Student marks).
th and td tags
In a data table the two kinds of cells available are data cells and header cells. The data cells are represented with <td> tag and header cells with <th> tag. Screen readers does not differentiate while navigating either <th> or <td> tag but it is important to provide the appropriate tags for relating the header and their corresponding cells.
Scope
Once the header cells and data cells are available for a data table, a relation between headers and their corresponding cells to be made available. A “scope†attribute is used along with the header cells to make this relation. Scope attribute identifies row header with scope=’row’ and column header with scope=’col’. Many modern screen readers provide the header cell relation without the scope attribute depending on the table structure. Scope attribute makes this relation clear helping users with older screen readers have the same experience.
headers and Id
In few cases where complex data tables are available the relation might not be possible with scope attribute. Headers and id attributes provide a solution in these cases. Every <th> tag should have an id attribute. The data cells will have the headers attribute. Using headers=â€id value†the relation between the header and data cells can be maintained. In extremely complex tables for one cell more than one header may be available. Use more than one id with a space to separate the id(s). Use the id order in which the screen reader need to take the priority.
Use relative size instead of absolute
It is better to let the browser decide the width of the table to avoid the horizontal scrolling. If the width need to be determined by the author it is recommended to use relative sizing (%) than absolute size (px). Also better to avoid defining the height of the cells providing the low vision users to expand the cells.
Sample code for simple data table
<table>
<caption>Student marks</caption>
<tr>
<th scope=”col”>Name/ Subject</th>
<th scope=”col”>English</th>
<th scope=”col”>Mathematics</th>
<th scope=”col”>Science</th>
</tr>
<tr>
<th scope=”row”>Robin</th>
<td>70</td>
<td>75</td>
</tr>
<tr>
<th scope=”row”>Goodwin</th>
<td>75</td>
<td>80</td>
<td>65</td>
</tr>
<tr>
<th scope=”row”>Rose</th>
<td>70</td>
<td>80</td>
<td>85</td>
</tr>
</table>Sample Table
Student marks Name/ Subject English Mathematics Science Robin 70 75 Goodwin 75 80 65 Rose 70 80 85 Points to remember
- Tags such as <thead>, <tbody> and <tfoot> does not harm the accessibility of data tables.
- Use of summary is an old practice. Summary is used to provide the structure of the table to the screen reader users. It does not add value to any other users. Using summary is not required but no harm in using.
- Summary attribute is not a HTML 5 specification.
- Avoid using empty cells in a table.
- Avoid using row span and column span.