This page is related to Accessibility
At a Glance
Images are an important way to communicate. Photographs, diagrams, maps, charts, visualizations, sketches, icons, and more: all of these convey information to their viewers. We use images in courses to add visual appeal, to convey information concisely, to demonstrate a process. If someone has limited or no vision, or other visual disabilities like colorblindness, they may not be able to fully engage with the image.
Overview
To make images accessible to everyone, we use alternative text, more commonly referred to as alt text or image descriptions. The simplest definition is that alt text is a text description of an image, which sounds simple enough. But writing alt text can prove quite challenging! It’s more of an art than a science: there’s no secret formula or setting that will make every image accessible to everyone, every time. Instead, you have to consider the content of the image, the context in which it’s placed, and what information it needs to convey.
Alt Text Key Concepts
Do not leave the file name as the alt text on an image.
By default, Canvas fills in the file name as the alt text when uploading an image. The file name alone is not an acceptable version of alt text. Delete the file name and either enter the correct alt text or mark the image as decorative. Otherwise, Pope Tech will flag it as “suspicious alt text” if you forget to change it when you upload the image
Context is key.
What alt text is needed depends not only on what the image is but on the information surrounding the image. What information is on the page that relates to the image? What information do students get from viewing the image? What information does the image itself communicate? Consider these questions as you’re writing your description.
Decorative images don’t need alt text.
After considering the context and what information it conveys, you may conclude that it doesn’t convey any information. It’s an icon included to help students quickly identify different elements of a module overview page, or it’s a stock photo used to break up a wall of text. But it doesn’t have an academic purpose. In that case, it is decorative and does not need alt text. Just click the decorative image checkbox and leave the alt text field blank!
Describe the information, not the image.
This can be a tricky concept! Images are a way of conveying information, just like text or speech. For simple images, like this photo of a kitten on a couch, the information conveyed is pretty straightforward.
The alt text for this could be “a sleepy orange kitten on a couch.” If it was relevant for the user to know, you could describe the fact that it is a close-up shot or the placement of the kitten’s paws. Unfortunately, there aren’t many opportunities to include pictures of kittens in SPS course sites. More often, faculty will ask students to look at complex charts, graphs, diagrams, or maps.
Organizational Transformation image taken from ORG BEH 301. Do not distribute.
When writing alt text for this image, it’s important to focus on the information, not what the image looks like. Talking about the color of the lines or their position relative to each other isn’t helpful to a student who can’t see the graphic in the first place. Students need to understand the connections between each element in the diagram, what parts lead to each other, and so on. For example, the alt text on this image might begin: “The process of transformation includes many steps. It begins with inputs like resources, competition, and time, which then lead to the strategy. The strategy leads into individual differences…”
Write out the text on the image.
Related to the above, if your image contains text, that text should be included in the alt text… as long as it isn’t redundant with other text on the page. So if you include a screenshot of a page from a book, the alt text would need to transcribe the text on the page, which rather defeats the purpose of taking a screenshot. In general, if there’s a lengthy section of text that’s going to be included, type it out or copy/paste it and add it (with appropriate citations) as a quote, rather than an image. However, things like header banners will have a brief amount of text, and that text can be repeated as the alt text. But again, consider the context. If the text on the banner is the same as the page title, it probably doesn’t need alt text.
Don’t start alt text by saying that it’s an image.
Thanks to the HTML code of a Canvas course site, a screen reader will be able to identify that an item is an image and will communicate that to a user before reaching your alt text description. So it is unnecessary, in most cases, to start your description by saying “an image of” or “a graphic depicting.” Just launch right into the description. The one exception to this rule is if the nature of the image is relevant information for students to have. For example, if it’s important to know that “green, rolling hills stretching to the horizon under a bright blue sky” is a painting and not a photo, then you can begin the description by saying “a painting of…”. But that is a rare exception and in general, specifying the type of image is not necessary.