Describing Images for Accessibility

Written by Aimee Dixon
Instructional Technology Specialist, UALR

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?

Alternate Text Descriptions

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.

Describing Simple Images

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

Making Detailed Picture Descriptions

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:

  1. First state the name of the image. Describe the image as a whole, then describe the details (after you have said the illustration is a picture of a house, then talk about a window, then what appears in the window).
  2. Pick out one or a few reference points and locate them within the image. Describe the details in a logical sequence, positioning them in relation to the reference points, such as explaining that you will begin in the upper left-hand corner and proceed clockwise around the image. Use positional words and phrases freely:
  3. Make comparisons to objects, nouns or concepts with which a blind person will be familiar, such as the hand, a ball, a triangle, etc.
  4. After describing the image, write, "End of ________ description." If the image appears on a linked page, provide a link that returns the reader to the original page, at a place where the browser can resume reading the text.

Top of Page

Making Detailed Table Descriptions

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.

  1. State the title.
  2. For each column, list the column heading, then list the information contained in each row of the table under that heading. If column headings or any data have footnotes, place them at the end of the related data.
  3. List the source, captions, and any explanatory keys at the bottom.
Top of Page

Where to Put Detailed Descriptions

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:

Linking to Separate Page with Detailed Descriptions

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.

Incorporating Descriptions within Your Content

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..."

Providing a Text-only Version of a Web Page

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.

flint fist hatchet of Early Stone Age
Figure 1. A flint fist hatchet of the Early Stone Age,
found in an ancient bed of the Nile.
Top of Page
<< Return to Main Page