Issue
When a graphic is distributed as an image (ie. formats like JPEG, PDF, PNG) any text that is part of the graphic becomes hidden from assistive technology. It may also may shrink to an unreadable size on smaller screens.
How to check
- Try to click and drag your cursor over the image. If no text highlights, it is not a readable image.
- OR, Press CTRL + F (Windows) or Command + F (Mac) and search for a word that appears in the image. If the word can’t be found in the search, the image is not readable by a screen reader.
What to do
- If the text content is short, write alternative text for the graphic that includes the text and captures its context within the graphic (social media workaround). Otherwise, keep the image or graphic file separate from the text or use features of your content management system to create an overlay (but be aware of color contrast!)
- As a general practice, avoid placing text over images.
- Don’t re-use print marketing assets in digital spaces and email.
Recommended tools
- TIP: On your published page, click and drag your mouse over your text. If you’re able to highlight just the text, it is separate from the image and can be read by a screen reader.
- Images & Media: Web Content Accessibility (Digital Accessibility Basic Training Canvas course)
Who’s affected
People who:
- Are blind/have visual processing difficulties
- Use mobile devices