Images

Images can convey a lot of information on your page. They can let users know what to expect when they come to our campus, office, program, or event. A user with a vision impairment may not be able to gain this information. Since all users should get the same information and benefits from our pages, we must write descriptive text that conveys the meaning of images on our page. While focused on images on web pages, you should also implement descriptive text in the content you produce for social media websites.

How Descriptive is Descriptive Text?

The detail used in the descriptive text of your image largely depends on the role that image plays within your website. As an example, the image above shows the Masked Rider riding onto the football field followed by the TTU football team. This image could be used to get people excited about going to TTU football games, or to showcase TTU traditions. The image here is being used to convey excitement and university pride, which could be missed by a user that can't see the image. You'll want to make sure the meanings of your images are conveyed in the rest of the text on the page or in alt text associated with the image directly. If an image is serving a purely decorative role with no meaning or information to be had from the image, then you wouldn't need descriptive text. This is likely rare though, as there is usually some amount of information or emotion you are wanting to convey in the image used on your site.

This alt decision tree from the World Wide Web Consortium can also help you decided how much descriptive text to write for your image.

Car Ad Example

Above is an example of a used car ad. The headline is simply "Used Car for Sale", but the image conveys a lot more information about the car being sold. In the image, we see a rusted Volkswagen Beetle that is missing several crucial parts. As no description is provided in this listing, the alt text of the image must convey this information.

Images with Text

If you have an image that contains text, there are a few things to consider. In creating that image, you must ensure there is sufficient contrast between the text of the image and its background. Placing text over a solid color background can facilitate this, as can using a contrasting outline around the characters of the text. You can check your color contrast levels with this Contrast Checker from WebAIM.

Any text in the image must be duplicated either in the descriptive text of that image or as real text on the body of the page. The image above contains an image of a milkshake with various toppings and text providing details for an ice cream social. The event title, location, date, time, and details should all be present either in the alt text or as actual text on the web page. The text "Ice Cream Bar. June 50th, 2:65 PM. Bring your favorite ice cream flavor or topping. 50-yard line, Jones AT&T Stadium" should appear either as alt text for this image or as body text somewhere on the page.

Images as Links

Alt text for image should be link location not description of image.

Don't write "Image of..." Unless...

Screen reading software will already announce an object as an "image". As such, your descriptive text does not need to include "Image of..." or "Photo of...". An exception of this would be if your website features artwork, especially with multiple mediums present on the same page. In that case, it is likely helpful to prefix your descriptive text with "Watercolor of..." or "Oil on canvas painting of..." to provide that additional context to your users.

Images of Graphs

If your site is using graphs of any kind, the descriptive text should provide a general description of the data as well as any general trends present. Something like "Line chart of annual sales data from 2000 to 2020, with sales growing by roughly $1,000 every year" could give users a good sense of what is depicted in the graph. It is generally a good idea to include a data table along with the chart to provide the full details for screen reader users. One can think of a graph as being assistive technology for those needing to interpret data, and you likely would want to provide a similar ease of interpretation to all users.

Images for Education

If you are writing descriptive text for an educational setting, it is important that you are still facilitating learning with the text. There is more to this then we will discuss, but lets say the task was to have students classify the animal pictured above. Sighted users can likely pick up on the key elements of the image and say "That is a cat." If the descriptive text for this image simply said "A cat sitting in a cat tree", those using a screen reader wouldn't be able to learn from the image.

In this case, the descriptive text for the image reads: "A small animal with fluffy grey hair, pointy ears, and whiskers. It sits in a home on top of a white, fuzzy platform.". A screen reader user could then pick up the clues of it being a small animal with whiskers inside a home and deduce that the image must be of a cat.

All users should have equitable experiences with your site. In this case, we need to ensure we aren't just giving away the answer but that we are also promoting learning and growth.