Exercise: Making more complex tables accessible
More Complex tables
Data tables that have two or more logical levels of row or column headers can be difficult to make accessible. New attributes were introduced in HTML 4 to associate data cells with their headers, making it easier to make complex tables accessible.
Open the tutorial file resources.php in your text editor and find the table showing example film speeds for specific weather conditions.
Screen reader users can find it difficult to read complex tables unless the headings associated with particular data cells is clearly indicated.
There are a number of way to do this – the simplest is to identify headers using the scope='col' or scope = 'row' attributes.
Adding scope='col' to the header elements of our example table tells the screen reader that any data in the same column is associated with this heading.
<table border="1" cellpadding="10">
<tr>
<th scope="col">Film speed</th>
<th scope="col">Weather</th>
<th scope="col">camera speed and apperture</th>
</tr>
<tr>
<td>ASA 100</td>
<td>Bright</td>
<td>1/250 at F/11</td>
</tr>
<tr>
<td>ASA 100</td>
<td>Normal</td>
<td>1/125 at F/11</td>
</tr>
<tr>
<td>ASA 100</td>
<td>Cloudy</td>
<td>1/60 at F/11 </td>
</tr>
<tr>
<td>ASA 200</td>
<td>Bright</td>
<td>1/500 at F/11</td>
</tr>
<tr>
<td>ASA 200</td>
<td>Normal</td>
<td>1/250 at F/11</td>
</tr>
<tr>
<td>ASA 200</td>
<td>Cloudy</td>
<td>1/125 at F/11</td>
</tr>
</table>
For more complex table – involving two or more logical levels of rows and columns – there is a more explicit way to associate data cells with their related headings.
In the example below the id attribute is used to add identifying labels to the column headings. These identifying headings are then added to the appropriate cells using the header attribute.
Add the id and header attributes, as shown below, to the film speeds table in the resoures.php tutorial file.
<table border="1" cellpadding="10">
<tr>
<th id="film_speed">Film speed</th>
<th id="weather">Weather</th>
<th id="speed_apperture">camera speed and apperture</th>
</tr>
<tr>
<td header="film_speed">ASA 100</td>
<td header="weather">Bright</td>
<td header="speed_apperture">1/250 at F/11</td>
</tr>
<tr>
<td header="film_speed">ASA 100</td>
<td header="weather">Normal</td>
<td header="speed_apperture">1/125 at F/11</td>
</tr>
<tr>
<td header="film_speed">ASA 100</td>
<td header="weather">Cloudy</td>
<td header="speed_apperture">1/60 at F/11 </td>
</tr>
<tr>
<td header="film_speed">ASA 200</td>
<td header="weather">Bright</td>
<td header="speed_apperture">1/500 at F/11</td>
</tr>
<tr>
<td header="film_speed">ASA 200</td>
<td header="weather">Normal</td>
<td header="speed_apperture">1/250 at F/11</td>
</tr>
<tr>
<td header="film_speed">ASA 200</td>
<td header="weather">Cloudy</td>
<td header="speed_apperture">1/125 at F/11</td>
</tr>
</table>
Your best chance of ensuring that your data tables will be accessible is to try to keep them simple, avoiding spanned rows or columns. Even the most popular screen readers such as JAWS cannot reliably extract and read the contents of very complex data tables.