At this point, you have added the textual and tabular elements into your HTML version of your spreadsheet. The elements remaining include the graphs and images. This page of the module will incorporate these remaining elements and complete the conversion of your Excel spreadsheet into a set of accessible HTML pages.
When you used the built-in "Save as a Web page" feature of Excel, the program generated images that represented the graphs of our spreadsheet. It is now possible to add those images of the graphs to our HTML pages. In this example, there are two graphs on page 1, and one graph on page 2.
The three images of the graphs are titled:
In order to add an image of a graph to our HTML page, you need to:
In this case, here is a sample of what the HTML would look like for the first
image:
<img src="image001.gif" alt="Bar graph distribution
of letter grades for ENG101, Summer 2003">
Repeat this process for the second graph on page 1 and also for the graph for
page 2, placing each image for the graphs in the correct spot in the document.
Here are examples of what the HTML could look like for graphs 2 and 3:
<img src="image002.gif" alt="Pie graph distribution
of letter-grades for ENG101, Summer 2003">
<img src="image003.gif" alt="Line graph showing the
grades over time for ENG101, Summer 2003">
While the "alt" tags for the graphs serve to briefly describe the
intent of the graph, these small descriptors are typically insufficient to accurately
inform non-visual users about the graph's content. In addition to providing
brief, "alt" tags, it is a
W3C recommendation
that you provide "longdesc" tags, as well as description
links
for users who use browsers not supporting "longdesc" tags.
In the examples in this module, there are three graphs that need long descriptions and description links. Two graphs appear on page1.htm, and one appears on page2.htm.
In this case, it is debatable as to whether you should provide new information and new Web pages for these descriptions or if you should simply refer back to the original table with the data from which the graphs were generated. While it is acceptable to link back to the original data tables for this example, it would also be beneficial to link to other pages with descriptions of the graphs' intent and overall message.
Below is the general template for adding long descriptions and description
links:
<p>
<img src="IMAGE FILE" alt="BRIEF ALTERNATIVE"
longdesc="HTML FILE LOCATION">
<a href="HTML FILE LOCATION" title="BRIEF DESCRIPTION">[D]</a>
</p>
In the example for the first graph on page 1, the HTML could look something
like this:
<p>
<img src="image001.gif" alt="Bar graph distribution
of letter grades for ENG101, Summer 2003" longdesc="long_desc_1.htm">
<a href="long_desc_1.htm" title="Description of Graph
1">[D]</a>
</p>
You can view the sample solutions at the bottom of this page.
On the the third page of the sample spreadsheet, there is an image you will now add into your third HTML page, page3.htm.
Whenever you need to place an image into your HTML page, use the standard "img" tag and provide the file location that represents the image.
The resultant HTML for the image should look something like this:
<img src="image004.jpg" alt="The front cover of the
course textbook, Introduction to College Writing by Jean Reynolds">
Add the two graphs to page1.htm, the next graph to page2.htm, and the last image to page3.htm of your HTML spreadsheet. When you are finished, check your work against the example solutions listed below.
Also, the long description pages for the three graphs in this tutorial can be found at the following:
The next page will discuss publishing Excel documents to the course management system, Blackboard.
College of Architecture (COA)
Fax: 404-894-9320
Phone: 404-894-4960 (v/tty)
User Agreement
Excel
Graphs and Images
,
2 KB)
Previous Page
