Quick Links: | Introduction | Writing Alt Text |
Introduction to Alt Text
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.
Accessible Images Policy
Photos and images are a large part of the campus web experience, so all campus web content creators are required to provide accessible imagery with supporting alternative text (alt text).
What Is Alt Text?
Alt text (or Alternative text) is added to images on the web to provide a text alternative to those images. Alt text should convey the meaning of the image rather than its appearance.
Alt text is critical for accessibility. It’s what a screen reader will read to a visually impaired user when they get to an image on the page. It’s also helpful to have alt text in case an image fails to load on the page. When an image does not appear, the alt text will also help sighted users understand your content.
Writing Alt 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?”
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
Here are some additional examples of using alt text to describe images:
Still need help? Put in a ticket with the Web Services team for further assistance.
Help us improve our Knowledge Base! Click Yes or No below, then let us know what worked — or what didn’t. Your feedback helps us improve our content and provide the best possible support.