The article supports Cascade 3.0 and Cascade 4.0 sites. Images are a large part of the campus web experience. All campus web content creators are required to provide accessible imagery with supporting alternative text (alt text).
What is Alt Text?
Alt text provides a text alternative for web images and conveys their meaning rather than appearance. It's also essential for providing an accessible experience by aiding screen reader users and describing images and their context within the webpage. Additionally, if an image fails to load, alt text helps all users grasp the content.
Writing Alternate Text
Hint: Ask yourself what you would want to know about the image if you couldn't see it.
- Don’t Use “Image of”
Don’t start your alt text with “image of” or “photo of.” A screen reader will identify the image as a graphic before reading the alt text, making it redundant.
- Keep It Simple
Be descriptive yet concise. Keep it to one or two sentences. Anything over 125 characters is too long.
- Describe the Function
If you are using an image as a link, describe the function of that link. Consider where that link going to take the user, and what are they going to do.
- Context Is Everything
Answer the question, “What information does this image add to the content on the page?”
Examples of Alt Text in Different Contexts
This is an image of Vincent Van Gogh. It is a self-portrait painting in the Post-Impressionistic style that Van Gogh was famous for.
Here are a few scenarios with appropriate alt text:
- On a page about famous artists throughout history
- Alt="Vincent Van Gogh"
- On a page about Van Gogh’s life and works
Alt=“One of Vincent Van Gogh’s last self-portraits”
- On a page about the Post-Impressionistic painting style
Alt="A Post-Impressionistic painting by Vincent Van Gogh with thick and swirling brushstrokes and expressive blue colors”
- On a page about the price of artwork
Alt=”One of the most expensive paintings of all time, a self portrait of Vincent Van Gogh, sold for 171.5 million in 1998”
Refrain from Using Text Heavy Images
- Think Twice
It’s always a good idea to think twice about using an image that contains text. Not only is an image with text inaccessible, but it creates problems with scale on a responsive site. Can a sighted user read the text on an image if it’s been scaled down to fit on a smartphone? Probably not.
- Do It Right
If you have an image with lots of text (for example, an event poster or advertisement), don’t use all of that text as the alt text. Turn the image into a link that goes to a page with all of the information in text format. Make sure your alt text for the image then identifies the function of the image.
Here’s an example:
Alt=“Report your grad school, internship, or full-time job offer”
Link the image to a page with the following content: "Let us know where you go! To assist with capturing data about where Chico State students are headed after graduation, please complete our Let Us Know Where You Go survey online or come into the Career Center to take your picture and receive a fun goodie bag!"
Additional Examples
