Images, Charts, and Other Graphics

Discussion

If you leave out the "alt" attribute in an image tag, screen readers and other user agents that read web pages aloud will typically read the "src" (source) attribute of the image, which is normally just a path to the image. This superfluous information will be confusing to students.

Discussion

It is important to remember that the "alt" text value needs to function as a replacement of the image. For screen reader using students or students who have images disabled or are using devices that do not display images, the "alt" text value is all they know about the image. However, images are typically viewed within the context of the text that surrounds them. So, when writing "alt" text values, you should be aware of both the literal visual content and what the function is within the web page.

For example, in a discussion of audio headsets, we may mention a number of models that are appropriate to use for speech-to-text usage. The details of the models might be given in the body of the text. So, when we provide images of the headsets, it will not be necessary to say more than, for example, "Plantronics EB400 Headset."

If, on the other hand, we were discussing specific functionality of the headset—that it was highly portable because it folded up—we might want to say, "Plantronics EB400, shown in collapsed position."

Finally, if the image is introducing a section discussing headsets in general and the particular model displayed is not relevant to the discussion, an appropriate "alt" text value might be, "stereo headset with microphone."

In other words, always consider the context of the image in relation to the current discussion.

One other thing to note is that "alt" values should not exceed one or two sentences in length. Visual browsers will truncate the "alt" or "title" tooltip after a certain length and screen reading programs may handle long "alt" values as though they refered to separate images. For these reasons, as a general rule, keep "alt" attribute values to less than 80 characters.

Resources

• “Appropriate Use of Alternative Text” — WebAIM article that provides good information on how to write alternative text for images.

Discussion

If an image is used as decoration only—a cartoon of a person talking excitedly and used to jazz up the "comments" section of a blog page—then we do not need to provide any "alt" text value for the image. The image is just decoration. It does not contribute anything significant to the understanding of the content of the page.

Assign alt="". This tells the screen reader or other user agent or assistive technology to ignore the image. A screen reader using student will simply not hear anything at all.

Example

Code Example: Assign a null ("") alt when the image is decorative or non-essential:

<img src="my/decorative/image.gif" alt="" />

Discussion

The original purpose of the "alt" attribute was to provide a textual equivalent for non-visual browsing, whether the user agent was a screen reading program or simply a browser that does not display images. Older versions of Microsoft Internet Explorer (IE) use the text of the "alt" value as a tooltip that becomes visible when a user hovers over an image with the mouse. This non-standard behavior is unique to IE. Other browsers use the "title" attribute value for a tooltip. The "alt" and "title" values should both be present and be identical if you desire the tooltip effect.

Though this tooltip effect is only accessible to students who can use a mouse, it can provide beneficial extra information for students with certain cognitive disabilities. Also, depending on how the student configures his/her assistive technology, it is possible the title will be read by a screen reader or the reading function in screen magnification software.

Example

Code Example: Assign both a title and alt for images to ensure mouseover tooltip on all major browsers:

<img src="washington-monument.jpg" alt="Washington Monument" title="Washington Monument" />

Discussion

As discussed in the Best Practices on links, link text should identify the resource linked to, so that the link can be read out of context of the surrounding text.

The same goes for images used as links, except the link text goes in the "alt" value.

For example, a graphical icon of a small house that is used as a link to the course home page should get the "alt" value "course home page," not "icon of a small house." By indicating "home page" we are telling the user the function of the image—it is a link to the course home page. Note also that we do not need to say "link to course home page," since all user agents will identify that the image is a link.

Discussion

Instructional designers should place a text caption above or below the chart graphic which uniquely identifies the chart. In some cases, images should have a caption. But often an "alt" text value is all that is necessary.

For charts or images that are crucial to understanding the content, however, the stakes are different. There needs to be a way to search in a document for such charts or images and have those search results be accurate enough so that a student can easily locate the rich data in the chart or image and not confuse it with some other chart or image.

The most straightforward means for such identification to give the chart or image a unique number or label.

Examples

Screen Shot: Using reference to a figure number to indicate a chart or image in an HTML document:

Figure BP-Images-1. Click image to enlarge.

Code Example: CSS for graphical box around image:

.image-box {
  background-color: #eee;
  border: 1px solid #ccc;
  padding: 5px;
  margin-bottom: 15px;
}
.image-box p { font-size: small; font-style: italic; margin: 0; }

Code Example: HTML code for the image box:

<p>
  The Washington Monument (Figure 1.6) is a prime example of a Neo-Egyptian obelisk.
</p>
<div class="image-box" style="width:283px">
  <img src="wm.jpg" alt="Washington Monument" />
  <p><strong>Figure 1.6:</strong> The Washington Monument on a sunny day.</p>
</div>

Discussion

For non-visual web users, it is always more difficult and in some instances impossible to determine visual spatial references, such as "to the right," "on the left side of," "above," etc., since a screen reading program reads the page in code order, rather than spatially.

Because of this, it is preferable to refer to charts by the unique number or label in their text caption. The label can be searched for easily. Another good strategy is not only to refer to the label but also to provide an in-page hyperlink or "anchor" that when clicked scrolls the student's browser window to the chart.

Discussion

Most charts in instructional materials are graphical representations of tabular data. It benefits all students, and perhaps especially students with disabilities, to supply an accessible HTML table of the data that is graphically represented in the chart.

Discussion

For simple charts or for charts that are merely graphical representations of table data that is available on the page, an "alt" value is enough to identify the chart. Something like "a chart representing the data in table 4.5" might be used as the "alt" value.

Discussion

This Best Practice builds on the previous two. It is usually best to use the main body text of the lesson, article, or discussion to elaborate the data in the chart. However, it may not always be feasible to do this. For greatest clarity, it may be necessary to provide both a link that takes the student to a page containing the tabular representation of the data along with further explanatory text.

Place the link adjacent to the image/chart and clearly identify in the link text that it is a "long description". For example, the link text might read, "long description and table equivalent of chart 4.5."

Discussion

HTML image tags have an optional attribute that was implemented to provide a link to an alternate page that explains the image or chart. The "longdesc" attribute was to be used in those cases where description of the image was too complex to be packed into an "alt" value. The "longdesc" attribute takes a URL as a value.

While some visual user agents will link to the longdesc URL when the image is clicked and screen readers will announce that there is a descriptive page available and provide to go there, all students, regardless of ability, will be able to activate a link in the text. And so the previous Best Practice is preferred over providing a "longdesc" value.

Resources

• “Too much accessibility: The Rise and Fall of the LONGDESC” — Article by the British Royal National Instistute of Blind People that discusses usage of and AT support for the image longdesc attribute.