Text In Images: Don’t Do It (Usually)
Here’s why we say that text should not be put in images on the web:
- Search Engines cannot find it – your page will not return results for that text.
- Screen Readers cannot read it – users with disabilities will not know it’s there.
- Consistency on Liberty’s website will be lost when everyone has very different text images on their pages.
For Function
When the text performs a function, such as a header or title, it should not be in an image because it needs to be searchable for Search Engine Optimization (SEO), and available to users with screen readers. Neither of these can happen when text is buried in an image.
Examples:
In this example, the text in the image is taking the place of a proper text header, so the page only has an image and body copy.
This is what the image “looks” like when someone is using a screen reader or has image loading turned off on their browser, so they would have no idea what the header is on the page (or that there is one).
Buttons
Buttons and images are two different things: Buttons are clickable links with a specific “button design” that users expect and know, whereas images are often not expected to be clickable by users. Images are meant to serve as visual/design appeal and should not be used as buttons. If you would like a button added to your page, you can request one from the Marketing Department.
For Design/Visual Appeal
Images are great for adding visual appeal to a page, and sometimes it is also okay if they have some text in them that only adds design appeal and does not take the place of pertinent text.
Example:
In this example, the text in the image is only providing design and visual appeal, it is not taking the place of the proper page header, which is still at the top of the page as it should be.
