There are three ways to make images and graphic elements accessible:
- Provide alternative text for images
- Reproduce any text on graphics as digital (accessible text)
- Provide long descriptions, if necessary, for complex charts or graphics
Images and Graphic Elements
What do we mean by accessible images and graphic elements?
Why are we doing this?
Creating accessible images makes the content of those images available to everyone - even those who cannot see or otherwise perceive the images. There are a number of reasons why an image might not be available to a user:
- Blind and low vision users cannot see the image
- Colorblind users cannot perceive the color in a graphic or image and are therefore unable to interpret the image
- Users with a poor internet connection cannot download images and are left only with the alternative text and text content of the page
- Users with an email program that blocks suspicious or unknown content might not see images unless the original sender is on an approved list
Creating accessible images ensures that information is not lost.
How to create accessible images and graphic elements
Alternative (Alt) Text for Images
Alt text basics:
- Alt text describes what you see in the image.
- Alt text is NOT the same as a caption. Captions often provide additional information about what is in the image or uses the image as a reference.
- Alt text should be SHORT. No more than 1-2 sentences. Anything longer should be presented on the page itself.
- Images that are marked as decorative do not need alt text. Screen readers will simply ignore the image.
- File names are not acceptable alt text (i.e., do not use "2732618015_4d3a514208.jpg" as your alt text!).
Winston is five months old today!
How to write alt text
Consider the following caption: Winston is five months old today!
Reading that caption does not give the viewer much information about who (or what) Winston is. Without the image, it's hard to get too excited for poor Winston.
Combined with the photo, however, someone who can see the image now understands that Winston is a puppy who (apparently) lives surrounded by color and toys.
Being able to see the image makes a difference in how much information the viewer has. Alt text is designed to replace the information a viewer gets from the image. For this image, the alt text could be: "Small brown, black, and white dog on a colorful rug surrounded by dog toys."
Clinics are available throughout the year with our highly-trained coaches. Visit our website for more information!
Here is another example.
Photo caption: Clinics are available throughout the year with our highly-trained coaches. Visit our website for more information!
Alt text: Indoor ice rink with skaters dressed in hockey gear practicing on the ice.
Here, the alt text and image show that the caption is referring to ice hockey clinics. The photo caption alone does not provide all of the information.
Decorative Images
If you use an image that only provides decoration (such as the blue bar of color at the top of this page) you can mark the image as "decorative". Decorative images do not require alt text. To mark an image as decorative, explore the software you are using to insert the image. Microsoft products, for example, include a checkmark in the alt text area, as does Canvas. If you are adding an image to an Ithaca College web page, you might not have the option to mark an image as decorative and will need to add alt text such as "decorative" to indicate that the image has no inherent content.