Context
Determining the Context of the Image
The first step in preparing to write alternative text (alt text) for images is to reflect on the role of that image within the webpage or document. Determine the purpose of the image and its place within the text surrounding it.
- Is it a decorative (graphic-only) image that the end user does not really need to know about? If so, assign it as a null (“”) or decorative image status so the screen reader will skip over it.
- Identify the context of the image with the surrounding text, is it redundant to the text, a standalone piece of information (detailed chart or graph) or a visual aid for organizing the page (i.e., separating line)? Ask yourself: (1) Why is the image there? (2) How does it relate to accompanying text?
- How does it relate to other images in the document (e.g., images on a timeline, photographs of individual species clustered together, inset maps, etc.)?
- Determine the appropriate length and level of detail to provide. Be efficient! Would you want to listen to the alt text for that amount of time?
- How much space is devoted to the image? If a lot of space, then what message is being conveyed that the accompanying text is not providing?
- Is accompanying text (including captions) adequate?
- What would a listener miss without the image?
Two images in need of alternative text
The images by themselves, have many options for adding alt text. However, when displayed along with accompanying text or placed within another format, such as a webpage or letterhead, the image’s context will take on a specific direction. For example, the State of Hawaii Seal is an elaborate graphic used to represent the State of Hawaii government. Its display on a page signifies an affiliation, same as a company logo, and requires minimal alternative text (i.e., State of Hawaii Seal). If it is being repeated as part of a header graphic, then its redundancy will be a distraction and not necessary to read each time it is displayed. In this case, it is appropriate to assign this image a null designation as “” in the alt text input area or click on the decorative image option. This will cause a screen reader to pass over the image and not require the user to listen to something unimportant. Three possible scenarios are:
- Official State of Hawaii document or website,
- Interesting facts about the State of Hawaii seal article,
- Header or footer on official State of Hawaii document or website.
However, if the focus of the surrounding text is about the design of the seal and details are being given such as the meaning of the Hawaiian phrase “Ua Mau Ke Ea O Ka Aina I Ka Pono” or a description of the two figures located within, then it would be appropriate to give more details in the alternate text. Just remember not to be redundant with the surrounding text and the alternative text, once is enough! Conveying the visual information not contained in the text is what is important.
The second image of two men sitting at a table also has multiple possibilities depending on how it is being used as a source of information. Three possible scenarios are:
- Article about UH President Lassner and Hawaii Governor Ige signing a proclamation regarding the university,
- Aloha wear as accepted business attire in Hawaii,
- Civic leaders in Hawaii.
Let's Practice
Now try the following activities before proceeding with the lesson: