What is an informative image when applied to a webpage? It is any image that adds materially to the understanding of the other text on the page. The alt-text, in this case, should be short, no more than a sentence, which expresses the meaning or purpose of the image. There are several different subcategories of informative images. Let’s take a look at a few.
-
The first is the use of an image to label other information that follows as shown here:
For this image of a phone, appropriate alt text might be as simple as:
alt = “District Phone Number”
-
More commonly, an image supplements other information on the page and is therefore material to understanding or visualizing that content. While the following image is a photo of a classroom, that is not the real point of the picture and therefore that would not be appropriate alt text.
For this image, more appropriate alt text might be:
alt = “Organization helps put a new computer on every desk”
Note that the important element of this picture is the addition of computers for each student to use, not the number of tables, or the number of chairs in the room or even what subject is taught in the room. In fact, it may be important to name the specific organization that helped put those computers on the tables.
-
The third type of informational image provides succinct information. Although this type is not as common as other images in our website pages, basically, it is an image that visually describes an action. For example, the following image visually illustrates a traffic flow pattern.
For this image, appropriate alt text might be:
Alt = “Traffic pattern when parking at our school”
In this case, a description of the traffic flow might also be provided along with the image as text on the page as an alternative to the image. This dual providing of the information will help make the information available to everyone
-
The fourth type of informational image may be included to focus on an impression, and emotion, and the celebration of something like winning an award.
For this image, the most appropriate alt text might be:
alt = “Student shares the joy of reading with younger students”
In this case, it is not important that the students are sitting on the floor. Nor is it important to describe what the children are wearing. The point of the picture is to show an emotion, that of the joy of sharing a book.
-
The last type of informational image described here defines the file format for documents that may be included in a list so that people know ahead of time the file type associated with the link before the attempt to open the link. This might also indicate visually whether the viewer has the necessary software to open the specific file.
In the above case, it is sufficient for the alt-text for each image to the left of each filename to identify each filename with something like:
alt = “Word Document”
alt = “PDF Document”
alt = “ZIP File”
alt = “PDF”
If on the other hand, if the filename includes a file extension as in the following image, the image could be considered decorative and only need an empty string
alt = “”
Note, however, the alt attribute is always required and cannot be skipped entirely.
Well, that covers various types of informative images and the suggested alt text required by them. The important thing to remember is that the alt text must describe why you placed the image on the screen. Typically the reason for an image can be described in a single sentence. Often, as we have seen here, it is not about the specific details of the picture itself, but rather the point or information that the picture is trying to get across.
Next time, I’ll take a ‘look’ at decorative images.
Return to the beginning of the Alt Text Series.