Printer-friendly page
Screen-friendly pageInformative Image Example: Data Chart
Image: Data Chart
- The flow chart that shows the trend of a dummy stock quote is an image.
- Although alternative text, content of the
altattribute, informs the user what the image is about, it does not convey the same information the image carries. - This issue is resolved by providing alternative access, formatted with text to be more widely accessible, to the information that is conveyed graphically in the image.
- This example is based on share price pages of nasdaq.com.
HTML Example
HTML Source Code
<img src="images/ex-data1.png" alt="Graphs charting open value, close value, and volume of trade of a dummy stock over 10 days" />
<div id="datachart_link"><a href="info-example-chart-data2.html">Data set of the dummy stock values</a></div>
<div id="datachart_link"><a href="info-example-chart-data2.html">Data set of the dummy stock values</a></div>
Text Equivalent: Text Data Table
- When the chart image is clicked on, a popup window launches with an HTML data table that features the same set of data, in a tabular format instead of a chart.
- This HTML data table is accessible to users of assistive technologies so that they can access the information in the chart image.
HTML Example
| Date | Open | High | Low | Close | Volume |
|---|---|---|---|---|---|
| 07/29/2008 | 135.28 | 143.35 | 128.77 | 141.92 | 225,199 |
| 07/28/2008 | 157.96 | 165.84 | 132.64 | 133.65 | 239,152 |
| 07/27/2008 | 161.84 | 166.58 | 151.25 | 155.92 | 194,900 |
| 07/26/2008 | 159.48 | 160.54 | 158.11 | 159.62 | 275,738 |
| 07/25/2008 | 153.06 | 159.88 | 149.63 | 157.26 | 390,306 |
| 07/24/2008 | 152.31 | 159.15 | 148.33 | 151.75 | 208,164 |
| 07/23/2008 | 147.22 | 152.41 | 141.97 | 150.68 | 445,032 |
| 07/22/2008 | 145.23 | 152.64 | 135.92 | 145.38 | 625,197 |
| 07/21/2008 | 150.95 | 159.63 | 141.77 | 143.57 | 584,398 |
| 07/20/2008 | 155.76 | 156.94 | 140.04 | 149.66 | 390,611 |
HTML Source Code
<table id="data_chart_example" cellspacing="0">
<tr id="headers">
<th id="date">Date</th>
<th id="open">Open</th>
<th id="high">High</th>
<th id="low">Low</th>
<th id="close">Close</th>
<th id="volume">Volume</th>
</tr>
<tr class="data">
<th id="07292008" headers="date">07/29/2008</th>
<td headers="07292008 open">135.28</td>
<td headers="07292008 high">143.35</td>
<td headers="07292008 low">128.77</td>
<td headers="07292008 close">141.92</td>
<td headers="07292008 volume">225,199</td>
</tr>
<tr class="data">
<th id="07282008" headers="date">07/28/2008</th>
<td headers="07282008 open">157.96</td>
<td headers="07282008 high">165.84</td>
<td headers="07282008 low">132.64</td>
<td headers="07282008 close">133.65</td>
<td headers="07282008 volume">239,152</td>
</tr>
<tr class="data">
<th id="07272008" headers="date">07/27/2008</th>
<td headers="07272008 open">161.84</td>
<td headers="07272008 high">166.58</td>
<td headers="07272008 low">151.25</td>
<td headers="07272008 close">155.92</td>
<td headers="07272008 volume">194,900</td>
</tr>
<tr class="data">
<th id="07262008" headers="date">07/26/2008</th>
<td headers="07262008 open">159.48</td>
<td headers="07262008 high">160.54</td>
<td headers="07262008 low">158.11</td>
<td headers="07262008 close">159.62</td>
<td headers="07262008 volume">275,738</td>
</tr>
<tr class="data">
<th id="07252008" headers="date">07/25/2008</th>
<td headers="07252008 open">153.06</td>
<td headers="07252008 high">159.88</td>
<td headers="07252008 low">149.63</td>
<td headers="07252008 close">157.26</td>
<td headers="07252008 volume">390,306</td>
</tr>
<tr class="data">
<th id="07242008" headers="date">07/24/2008</th>
<td headers="07242008 open">152.31</td>
<td headers="07242008 high">159.15</td>
<td headers="07242008 low">148.33</td>
<td headers="07242008 close">151.75</td>
<td headers="07242008 volume">208,164</td>
</tr>
<tr class="data">
<th id="07232008" headers="date">07/23/2008</th>
<td headers="07232008 open">147.22</td>
<td headers="07232008 high">152.41</td>
<td headers="07232008 low">141.97</td>
<td headers="07232008 close">150.68</td>
<td headers="07232008 volume">445,032</td>
</tr>
<tr class="data">
<th id="07222008" headers="date">07/22/2008</th>
<td headers="07222008 open">145.23</td>
<td headers="07222008 high">152.64</td>
<td headers="07222008 low">135.92</td>
<td headers="07222008 close">145.38</td>
<td headers="07222008 volume">625,197</td>
</tr>
<tr class="data">
<th id="07212008" headers="date">07/21/2008</th>
<td headers="07212008 open">150.95</td>
<td headers="07212008 high">159.63</td>
<td headers="07212008 low">141.77</td>
<td headers="07212008 close">143.57</td>
<td headers="07212008 volume">584,398</td>
</tr>
<tr class="data">
<th id="07202008" headers="date">07/20/2008</th>
<td headers="07202008 open">155.76</td>
<td headers="07202008 high">156.94</td>
<td headers="07202008 low">140.04</td>
<td headers="07202008 close">149.66</td>
<td headers="07202008 volume">390,611</td>
</tr>
</table>
<tr id="headers">
<th id="date">Date</th>
<th id="open">Open</th>
<th id="high">High</th>
<th id="low">Low</th>
<th id="close">Close</th>
<th id="volume">Volume</th>
</tr>
<tr class="data">
<th id="07292008" headers="date">07/29/2008</th>
<td headers="07292008 open">135.28</td>
<td headers="07292008 high">143.35</td>
<td headers="07292008 low">128.77</td>
<td headers="07292008 close">141.92</td>
<td headers="07292008 volume">225,199</td>
</tr>
<tr class="data">
<th id="07282008" headers="date">07/28/2008</th>
<td headers="07282008 open">157.96</td>
<td headers="07282008 high">165.84</td>
<td headers="07282008 low">132.64</td>
<td headers="07282008 close">133.65</td>
<td headers="07282008 volume">239,152</td>
</tr>
<tr class="data">
<th id="07272008" headers="date">07/27/2008</th>
<td headers="07272008 open">161.84</td>
<td headers="07272008 high">166.58</td>
<td headers="07272008 low">151.25</td>
<td headers="07272008 close">155.92</td>
<td headers="07272008 volume">194,900</td>
</tr>
<tr class="data">
<th id="07262008" headers="date">07/26/2008</th>
<td headers="07262008 open">159.48</td>
<td headers="07262008 high">160.54</td>
<td headers="07262008 low">158.11</td>
<td headers="07262008 close">159.62</td>
<td headers="07262008 volume">275,738</td>
</tr>
<tr class="data">
<th id="07252008" headers="date">07/25/2008</th>
<td headers="07252008 open">153.06</td>
<td headers="07252008 high">159.88</td>
<td headers="07252008 low">149.63</td>
<td headers="07252008 close">157.26</td>
<td headers="07252008 volume">390,306</td>
</tr>
<tr class="data">
<th id="07242008" headers="date">07/24/2008</th>
<td headers="07242008 open">152.31</td>
<td headers="07242008 high">159.15</td>
<td headers="07242008 low">148.33</td>
<td headers="07242008 close">151.75</td>
<td headers="07242008 volume">208,164</td>
</tr>
<tr class="data">
<th id="07232008" headers="date">07/23/2008</th>
<td headers="07232008 open">147.22</td>
<td headers="07232008 high">152.41</td>
<td headers="07232008 low">141.97</td>
<td headers="07232008 close">150.68</td>
<td headers="07232008 volume">445,032</td>
</tr>
<tr class="data">
<th id="07222008" headers="date">07/22/2008</th>
<td headers="07222008 open">145.23</td>
<td headers="07222008 high">152.64</td>
<td headers="07222008 low">135.92</td>
<td headers="07222008 close">145.38</td>
<td headers="07222008 volume">625,197</td>
</tr>
<tr class="data">
<th id="07212008" headers="date">07/21/2008</th>
<td headers="07212008 open">150.95</td>
<td headers="07212008 high">159.63</td>
<td headers="07212008 low">141.77</td>
<td headers="07212008 close">143.57</td>
<td headers="07212008 volume">584,398</td>
</tr>
<tr class="data">
<th id="07202008" headers="date">07/20/2008</th>
<td headers="07202008 open">155.76</td>
<td headers="07202008 high">156.94</td>
<td headers="07202008 low">140.04</td>
<td headers="07202008 close">149.66</td>
<td headers="07202008 volume">390,611</td>
</tr>
</table>