Describing Your Images

Describing Your Images on Udemy

Images can convey a lot of information to your users. They can let people know what to expect when they come to our campus, office, program, or event. It is our duty to ensure that all visitors to our websites can get the same information. Users with a vision impairment may not be able to gain information provided by images on your page without descriptive text. Descriptive text, associated with or placed near an image, provides any meaningful content for the image.

We have an example here... an example image here showing the Mashed Rider charging out from a puff of smoke leading the TTU football team out onto the football field. A crowd of fans cheers them on in the background. There is a lot of excitement in that image. It speaks to what it is like to attend a TTU football game or to the traditions present at Texas Tech. If you are using this image on your site, you'd want the text near the image to also convey these meanings to your users. If that isn't appropriate for the text on the page, then you can associate the descriptive text with the image itself. In OmniCMS, this is the image description field, shown when you go to add the image. And if you're writing the HTML yourself, it would be an "alt" attribute with the image tag. I will also mention that some tools may try to generate these descriptions for you. I'll note that when I placed this image into a Microsoft Word document, it gave a description somewhat similar to "Person riding on a horse." We know there's a lot more excitement and context present in this image.

You may have images on your site that serve a purely decorative role. These images don't convey any specific meaning, and they are really only used to make a page look nicer. An example of this can be seen on this page from the TTU Sevilla Study Abroad program. This page is talking about an architecture program, and behind the page title is an image. The image seems to have an architectural drawing and a couple of rulers. I'm not an expert on this program or an expert on architecture, but to me these items don't necessarily convey any meaningful information. It's likely common knowledge that an architecture program would deal with the design and layout of a building, and the objects depicted here would be part of that program. I would say this image is decorative and wouldn't need any associated descriptive text since the information it provides is not critical or meaningful. If your image is, including our people, our places, and our programs, it's likely that you would want descriptive text because you are tying more relevant information to our campus. Since the items here are fairly generic, that isn't needed.

Another example we have, we have a heading here that simply reads "Used Car for Sale", followed by an image. That heading doesn't convey much information, but the image shows a rusted out car that's missing a headlight, hood, and windshield. There's a lot of information about this car and its condition conveyed in the image. Some parts of your site may be designed to just have an image and a heading, with the expectations that users would click through to learn more. Here, you'd want to make sure the relevant information is associated with the alt text since you don't have a place to add that description.

We also need to talk about any images you have that contain text. You want to avoid having meaningful text within an image where possible, as this text cannot be read by a screen reader. Here, we have a sample event flyer for an ice cream social, showing the title, date, time, location, and description of the event. Many people make images like this to advertise their programs and events, but there are a couple of things for you to know.

First, you'll need to make sure that any text within the image has sufficient color contrast with its background. The WebAIM Color Contrast Checker is a really awesome tool for this. You can enter the colors used for your text and the background and it would give you the contrast ratio for those colors. Larger and bolder text doesn't quite need as much contrast, and there are two levels of requirements that we could meet. In general, we should aim for the highest contrast possible, ideally as far above 4.5 to 1 as would work for our design. In our sample image back before, we had white text on a solid black background for the most possible contrast.

Any text within that image would not be read by a screen reader. As such, you need to duplicate that text either as real text on the page, or with "alt" text for the image itself. Our example here, advertising the ice cream social, we have the date, time, location, and description for the event on the image. If we were actually advertising this event on our page, we would want to have all of this text be actual text on the web page itself. We wouldn't simply want to add this image to the page and be done. I've seen those pages, I know people do them, but we would want to have all of that text be real text on the page. An example of that is this event on the Staff Senate site. At least at the time of this recording, Staff Senate has held the Tech Advantage Fair in the spring semester to showcase area businesses and campus departments that support staff members. They have this graphic with all the details of the event, the title, the location, the date and time, and a little bit of some description text there. Importantly, when this web page was made, they also duplicated all of that same information as actual text on the page. It's a good time to remind you that a lot of our discussion is focused on editing websites, but these kinds of things we talk about are still relevant for any electronic message that we send, whether that is on social media or through email or anything like that. So, you can have your event flyer that you've designed in Canva, Illustrator, Publisher, or whatever tool, but it's also important to also provide text alternatives for those images. Like I said, On social media, you can often provide that alt text in your social media post or just in the body post of the description or of the message in that description field, providing all the real text as the post body itself. Also, in your emails, you know, maybe including your image or flyer as a PDF or image as an attachment, but the body of the email having the actual details is always a great thing to do.

If your image is being used as a link, the alt text for image should describe where the link is taking a user. So in this case, since the alt text is being used to describe the link target, you would want descriptive text to be near the image to describe any relevant information from the image. Screen readers are also going to describe the object as an image or graphic, so there's no need to prefix your alt text with "Image of ..." or "Photo of ..." or anything like that. The only exception might be if your website is showcasing artwork in a variety of mediums. In that case, you may want to use "Watercolor of ..." or "Oil on canvas of ..." or something like that to convey some additional context.

If you are using an image of a graph, the descriptive text for the graph should describe the data items present as well as the general trends. This could be something like: "Line chart of annual sales data for the last 20 years, with sales generally increasing." So that kind of description says what type of graph is present, what data fields are there, so sales over time, and then a trend that's present within that line graph there as well. It's also best practice for when you have graphs to provide a data table for users to explore the data themselves.

Some of you may be using images to serve some educational purpose. It's likely, or it's important to note here, that our descriptive text shouldn't give away any additional information not present to a sighted user. We have an example image here where we have a small animal with fluffy gray hair, pointy ears, and whiskers. It's sitting in a home on top of a white platform. Let's say our goal with this image was for users to correctly identify and classify this animal. Our descriptive text would convey the key elements of the image that could help a user identify the animal. In this case, our description stated that it was a small animal with pointy ears and whiskers sitting in a home. If our descriptive text just said "A cat sitting in a cat tree," we'd be giving away that answer to some of our users.

As another example, let's say we had an image showing a lake with an arrow pointing up to the sky. Maybe next to that in the sky we had a cloud that's raining. And maybe between the rain-soaked ground and the lake we have another arrow pointing at the lake. Our educational goal may be for users to identify what the diagram is communicating, what the overall system is called, or what various steps of that process would be identified as. In our descriptive text we provided, we just pointed out the key elements of the image and let the user identify this is the water cycle, we're describing evaporation, condensation, and precipitation, and those kinds of things. So keep that in mind when you're writing your descriptive text for educational goals. Note that I'm not an expert on instruction, so these likely are imperfect examples. The key takeaway is to be cognizant of what information you are putting in "alt" text for images used for instruction to make sure you are in fact giving the same information to all of your users.