Open Forum

 View Only

Accessibility - Adding Text Alternatives for Images

By Community Manager posted 09-13-2024 09:56

  

What is alternative text? 

Whenever you add an image to a document, website, or app, you should also have the option to add a text alternative for the image. This alternative text, or alt text, is usually invisible, but it will display if the image fails to load. This means even if the person reading your content has a slow internet connection, aggressive firewall, or user setting that prevent images from downloading, they'll still be able to understand your content fully.

A screenshot of an email footer from Zoom. There are three empty image icons - the one on the right is labeled with a link "Blog". The other two have no label. 

Figure 1: With my email set to not download images, I can see that the rightmost image is a link to Zoom's blog because it has an alt text of "Blog". I can't tell what the images on the left are because they have no alt text. 

A screenshot of an email footer from Zoom, this time with the images loaded. They are a Twitter icon, a LinkedIn icon, and a blog icon. 

Figure 2: Here I've downloaded the images. 


Alt text is also essential for people who are blind or
low-vision. Since they cannot clearly see images, they use a screen reader which can access the alt text and read it out loud to them or send it to a braille display.
 

In short, alt text allows everyone to access your content, even if they can't see the images. However, this only works if you provide meaningful alt text any time you add an image. 

Writing good alt text. (It's all about the information!) 

Good alt text should be able to serve as an alternative to the image. If someone couldn't see the image, what would they need to know about it to understand the overall content? 

Here are some general guidelines: 

·       Keep it short. Aim for one or two sentences. 

·       Don't include "image of" or "photo of". Anyone reading your alt text will already know it describes an image. Sighted people will be able to see the broken image icon, and screen readers will announce that they're describing an image. Sometimes it may make sense to specify a particular type of image, like "oil painting" or "cartoon drawing", because that's extra information about the image. 

·       Include relevant text from the image in the alt text. If that ends up making the alt text too long, your image may have too much text! In general, try to use real text as much as possible, and only use images of text when you can't achieve the formatting you need otherwise (like logos and word art). 

It's tempting when writing alt text to describe what you see in the image, but usually what's most important is the information the image conveys. 


When to
not write alt text 

Not all images are worth describing! Some images aren't there to communicate anything, they're just there to look nice. These are decorative images. Instead of providing alt text for these images, you can mark them as decorative, which tells screen readers to ignore them. It's important to actually check the box to mark an image as decorative (rather than leaving the alt text blank) because if an image is not marked as decorative, a screen reader will do its best to tell the user something about it. These attempts are usually not very helpful (like reading out the file name) and make the user think they're missing something important. 

A screenshot of two required fields. The first a yes/no radio option with label "* Is this image decorative?". The second is a text box with label "* Alt text" and helper text "100 characters remaining". Both fields have a question mark icon next to them. 

Figure 3: Alt text prompt from Attendee Hub. The alt text field appears only if the image is marked as not decorative. 


Can AI do this for me?
 

Computers are getting better and better at identifying what's in an image, and many platforms now use that capability to automatically generate alt text for images! However, describing what's in an image often makes for unhelpful alt text.   

For example, Microsoft Word generated this alt text for the image shown below: 

A person standing in front of a blue sign 

Description automatically generated 

Reggie Aggarwal standing in front of a blue sign that says "Cvent Connect Europe" 

While this description tells you what's in the image, it doesn't tell you what the image is of or about. If you were writing an article about CEOs in digital industries, a better alt text might be "Reggie Aggarwal, CEO of events software company Cvent". 

If you were writing an article about the events that Cvent puts on each year, you might set the alt text to "Reggie Aggarwal speaks on stage at Cvent Connect Europe". 

You have the context to write the best alt text for your content. You can use AI generated descriptions as a starting point, but always check them and make adjustments. Remember, the alt text should serve as a viable alternative to the image. 


Summary

Providing meaningful text alternatives for images allows everyone to access your content even if they can't see the images. 

Best practices: 

  • Describe what someone would need to know about the image to understand the overall content.  

  • Keep alt text to one or two sentences. 

  • Don't include "image of" or "picture of" in your descriptions. 

  • Do include any relevant text from the image. 

  • Mark images that don't convey any information as 'decorative' to hide them from screen readers.

Resources

Further reading on alt text 

·       https://www.w3.org/WAI/tutorials/images/decision-tree


If you haven't yet already be sure to checkout the first article in our Accessibility series here:
Accessibility - Using Color in Accessible Ways for Your Event Sites


#AttendeeHub
#EventApp
#Accessibility
#ManagingEvents
#ManagingHybridEvents
#ManagingVirtualEvents
#PromotingYourEvent
#Blog

0 comments
16 views

Permalink