Using a TABLE to Create ALT text for a Complex Graph

Sometimes, alternative descriptions for complex images like a chart are best done with data tables. These can be either on screen directly under the image or even as a popup page that is linked to the image.

Example 1:


A Pie Chart Representing the percentage of death attributed to various catastrophes
Catastrophes %
Volcano 0.1%
Epidemic 19.8%
Famine 9.2%
Storm 3.2%
Earthquake 1.0%
War 66.8%

Code


<img src="http://www.donaldevans.com/images/PieChart.png" alt="" title=""/><br/>
<table>
<caption>A Pie Chart Representing the percentage of death attributed to various catastrophes</caption>
<tr><th scope="col">Catastrophes</th><th scope="col"><abbr title="percent">%</abbr></th>
<tr><td>Volcano</td><td>0.1%</td></tr>
<tr><td>Epidemic</td><td>19.8%</td></tr>
<tr><td>Famine</td><td>9.2%</td></tr>
<tr><td>Storm</td><td>3.2%</td></tr>
<tr><td>Earthquake</td><td>1.0%</td></tr>
<tr><td>War</td><td>66.8%</td></tr>
</table>

Works With

Using a Data Table as Alternative Text
Browser Screen Reader Results
IE 9 JAWS 12 Yes
FF 4 JAWS 12 Yes

Standards:

Comments are closed.