Images and Alt Text

When adding photos or graphics to your web content, consider how users with vision impairments will interact with it:

• A blind user will rely on alt text read by a screen reader for the content of the image.
  • Solution: add quality alt text to each image; avoid text on images or keep it to a minimum.
• Someone with low vision may use an assistive device to zoom in to see it more clearly.
  • Solution: use high-quaility, clear images.
• Someone with color blindness will require proper contrast.
  • Solution: Make sure the image has enough contrast, especially if it contains text.

Read more about using images and the impact on users with disabilities.

Alt Text Best Practices

The purpose of alt text is to describe the image visuals and the context for a user who cannot see it. For example, the photo shown could have alt text of “male student and a professor in a laboratory.” It describes it, but doesn’t add much.

The purpose of the image will depend on the context of the page. If the page is highlighting the safety measures taken in the lab, a better alt text might be “student and professor wearing coats and protective gear conducting a chemical experiment behind the safety glass divider in the laboratory.” 

In short, don’t go with a short alt text just to have one. Give the users the context and contents of the image. 

How to Make an Image Accessible for the Website and D2L

Alt Text in Cascade CMS

Alt text for an individual image in Cascade CMS is found on the Insert/Edit Image window when inserting an image, under “Image Description.” 

If you have a complex image (e.g., table, graph, poster) and require alt text longer than the field provides, please reach out to web-team@iup.edu for support.

Alt Text in D2L

Directions on how to add alt text in D2L., the learning management system.

Understanding the Impact of Images

Example: Event Poster

You have an upcoming event and you have created a poster with all the details—date, time, location, how to get tickets, etc. It may seem like the easy solution is simply to upload the poster to your news item. It is visible on the page and looks nice.

But consider these scenarios.

• A user who is blind and relies on a screen reader wants to learn more about your event. If you created alt text that simply describes the poster or the event in general (e.g., “event poster”), they can’t get the details. If you provide all the event details in the alt text, that will be available to them. But it will be read to them in one long sentence, possibly making it hard to understand.

• A user who has a vision impairment and needs higher contrast. Using their accessibility tools, they can change the contrast of an HTML page to improve their experience. But an image may not always adjust to the contrast properly or in a way that they can actually read it, making the information inaccessible to them.

• A user with no disabilities but who is using a smartphone to view the news item. Having the information only in the image will require them to zoom into the image to read the details. Helpful things like being able to highlight the physical address or email will be unavailable.

The best solution for all of these scenarios is to provide the information as text in the page itself. You can then use headings and proper text formatting, allowing the screen reader or other assistive devices to read each piece of information at a time (e.g., date, then time, then location), and allow all users to benefit from the easily-accessible information. You can still add the image of the poster and use alt="" to denote that it is decorative, since the information is accessible within the text. Or, even better, consider using an image with little to no text as your graphic to supplement the text.