Image accessibility
By default, images aren’t accessible – people using screen readers can’t tell what’s in an image at all. People with limited vision or color blindness can have a difficult time seeing what an image is showing if it’s too dark or has low contrast. Below are a few things we need to do to make images accessible.
Jump to a component:
Alternative text
All images should have alternative (alt) text. Alt text is a short description of the photo or its meaning that allows people who use a screen reader to “see” the image. There are a few general guidelines to follow when including and writing alt text.
How to use for Alternative text
When adding an image, type the alt text into the “Alt Text” field.
A red error message will appear if you insert an image without alt text onto your page. (The error is only visible to the editor, not when viewing the published page.) Edit the image to add the alt text and delete the error message.
Development info for Alternative text
<img alt="" src="" />
Example of Alternative text
- Briefly describe what the image conveys. For example:
- “Students working together on a project in class.”
- “Students smiling at the camera at commencement.”
- “Faculty member helping a student at a whiteboard.”
- “Sylvania weight room during a training class.”
- If the photo has embedded words, include the words in the alt text.
- “Event banner that reads ‘Purchase your PCC Gala tickets’.”
- Note that it’s bad practice to use an image instead of real text for the sake of formatting or color. More on this below.
- If the photo is strictly decorative and doesn’t contribute any meaning to the page, you may leave the alt text blank (
alt="").- But make sure all images have at least a blank alt tag. If an image doesn’t have alt text, screen readers will read the source location for the image – long, ugly strings of folder and file names, and often numbers. This is meaningless and gets in the way.
- If the alt text is empty (
alt=""), screen readers will simply skip the image.
No images of text
Images should never be used in the place of real text (the stuff you can highlight). People often request to post things such as event posters or buttons because they like the text formatting, fonts, and colors. We don’t do this – all information needs to be available as real text.
- People with screen readers won’t be presented with the image’s information unless you use alt text (see above). Even with alt text, it’s easier to listen to the information in context with the rest of the page rather than in a separate image.
- Some people need to zoom text in to be able to read it – images with text don’t zoom without losing clarity and often become unreadable.
- Some people need to be able to change the font or background color, or even the font itself. For example, people with dyslexia can convert web text to use a dyslexia-specific font, which makes it easier for them to read. Text in images can’t do this.
- On small screens like phones, images can become quite small and the text may no longer be legible.
- You can’t copy and paste text from images to use in other applications.
Choose images that are bright, crisp, and uncluttered
No one likes looking at blurry images, or images that are too dark to see what’s going on. This especially becomes a problem for people with limited visibility or color blindness. Make sure you choose images that are well-lit, have plenty of contrast, and aren’t blurry. Images with a minimal amount of clutter around or behind the subject are also helpful. Learn more about choosing photos.