Images are often used to complement text on websites and other digital mediums. However, it is important to consider the accessibility of these images to ensure that everyone, including those with disabilities, can understand the content being presented. Text within images can be hard for many users to understand. Text embedded in an image may be too busy and distracting to read for someone with cognitive difficulties.
When it comes to using images with text, text should always be presented in a way that can be understood by those who are visually impaired or have other disabilities. It is crucial to consider factors such as image descriptions, alt text, and captioning to ensure that everyone can fully engage with the content being presented.
When possible, UL advises against using images that contain text on our website.
With the current capabilities in most web browsers, it is good design practice to use actual text that is styled with CSS rather than image-based text presentation. This is much more flexible than images: It can be resized without losing clarity, and background and text colours can be modified to suit the reading preferences of users. Images are more likely to distort and pixelate when resized.
In those rare situations where text must be displayed within an image, the text alternative must contain the same text presented in the image (w3.org)
Limiting Customised Settings
Many users customise platforms and browser settings in order to convey information. This includes increasing font size or using high contrast mode which inverts colours so they are easier for some users to read. When text is added to an image prior to uploading it cannot be customised and therefore does not suit the users needs.
Do: Images with accompanied text
We advise that editors use the appropriate content block features when adding new content to their site and use the text boxes to add information.
The following example shows a news item with the accompanied image displayed separately above the text.
The news headline can be clearly read below the image and all necessary information is legible.
The image connects to the news headline without distracting from it.
Don't: Non-editable text saved within the image
We advise against creating graphics that contain text in photo-editing software.
The image on the left displays different information and Calls to Action. Those who rely on assistive technology may have trouble reading the text and getting the information they need from this poster. The text has been embedded into the image when created so it cannot be edited or made a larger size.