Reprinted with Permission
Can you visualize what this text is describing?
"Figure 1. A flint fist hatchet of the Early Stone Age, found in an ancient bed of the Nile. Figure 1 shows an oval rock. The top of the rock is in its natural state. Down towards the bottom, bits of the rock have been chipped away, until the bottom edge has become thin, pointed and sharp. End of Figure 1 description."
Scroll to the bottom of this page for the actual visual image.
A good test to determine if a description is adequate, is to imagine reading the description aloud over the telephone. Does it give the listener enough information?
Accessible Web pages have alternate text descriptions of the images (graphics, tables, charts, diagrams, maps, etc.) present within the content or within the HTML coding. This aids every student, but especially the user who:
Creating textual descriptions of images that are important to the content of the material on your Web pages gives you a chance to focus on what is visually important within an image. This will help every student who is interested in learning.
From the beginning of the web design process, including this step of describing images gives you the advantage of thoroughly understanding the image you are presenting to your students. You will have the opportunity to consider what information you want your students to glean from the image, and how it relates to the learning objective you have in mind. Then you can consider how to incorporate this learning objective into your lectures, discussions or activities.
Simple graphics can be made accessible if the graphic images are coded with ALT
attribute within the <img> tag. Simply use a description with a few words
or a short phrase, for example:
<img src ="myimage.gif" alt="a picture of a cat">
The ALT attribute is appropriate for simple graphic images such as logos, decorative images, icons, etc., if the image and the description it contains is provided for visual accent, and not for its informational content.
Top of Page
Providing more detailed descriptions of pictures or graphic images (illustrations, charts, maps, etc.) that are important to the meaning of the information on your Web page can be accomplished by doing the following:
Top of Page
Conveying the information contained in a table, chart, graph, or diagram is easily accomplished as a list: either ordered or unordered (OL or UL). Most tables are easily converted to text.
Placing descriptions of images within the content of a web page, such as tables, maps, graphs or charts, can be accomplished by using one of these methods:
Just above or below the image, place a link that is called "text description" to alert your reader that they may follow this link to the more detailed description. Assuming this text description has been written in an additional page called "stone_txt.html," you can direct your user to that additional page by coding this on the original page:
<img src="stone.jpeg" alt="a flint fist hatchet of the early stone age" / >
<br / >
<a href="stone_txt.html" title="link to text description of flint fist hatchet">text description</a>
Then, on the addtional page with the detailed text description, provide a link back to the original page.
Using the material you are presenting, place the description of the image within the text where it will make the most sense to the reader. One possibility is to insert the description into a separate paragraph at the appropriate point where it will enhance the idea you are trying to get across. You can then refer back to the important points you have just described. For instance:
"...used tools for hunting as did other nomadic cultures of this age.
Figure 1 shows an example of this kind of tool, a flint fist hatchet of the Early Stone Age, found in an ancient bed of the Nile. Figure 1 shows an oval rock. Notice how the top of the rock is in its natural state. Down toward the bottom, bits of the rock have been chipped away, until the bottom edge has become thin, pointed and sharp. (End of Figure 1 description.)
The skill required to adeptly chip away the bottom edge into a sharpened point to create such a tool suggests..."
You can simplify the coding of an entire Web page into a text-only version using basic HTML tags. UALR's Project PACE Web Accessibility page explains a step-by-step way to accomplish this.
Include the more detailed descriptions of images within the content (between the body tags) by inserting the detailed text description in the appropriate place, where the image is referred to within the document. Please see "Incorporating Descriptions within Your Content" above.
Creating an entirely separate text-only page to attain accessibility on the Web is a last resort. Creating this extra page can be time consuming, and will require updating when the original page is updated. Consider this option if there is no other way to deliver the same experience to the user who is not able to access the images.