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).
Alt Text
What Is Alt Text?
Alt text is added to images on the web to provide a text alternative (text only) to those images. Alt text should convey the meaning of the image rather than its appearance.
Required for Accessibility
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.
How To Write 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.
Context Is Everything
Answer the question, “What information does this image add to the content on the page?”
Here’s an example:
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
- 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 $71.5 million in 1998”
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.
Images With Text
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!"
Graphs, Diagrams, and Maps
Many times, a picture is worth a thousand words. In some cases, an image is an important learning tool to illustrate a point. These types of images can be helpful to sighted users, and you wouldn’t want to avoid them simply because they have text in them. Make sure you write helpful alt text by describing what the image is and what the visual information means.
Consider Color Blindness
One of the easiest tests you can do to check for accessibility with color blindness is to print your page with a black and white printer. If the information still makes sense in black and white, then you’re good to go. If not, alter your images so the information does not rely on color to be understood.
Online Resources