Text In Images

This is something that comes up from time to time. Is it ok to add text in images in email?

There is a bit of a misconception that all you need to do is add alt text and your code is now accessible. This is a bit of an oversimplification. Although missing (or badly written) alt text is one of the worst accessibility issues, it’s not the only one.

Below I’ve listed a few accessibility issues along with a few other issues that are worth considering if you are going to include text in images. This probably isn’t everything, if you have any more let me know.

Accessibility issues

Screen readers will announce every image as an image

It’s not a big issue if it’s only 1 short sentence, but it can quickly get distracting and can interrupt the flow of the content if too much of your text is in images.

Adding semantic structure is possible but has limitations

Yes, we can still keep semantic structure by wrapping our images in HTMl.

<h1>
  <img  src="heading.png"  alt="Is it ok to add text in images in email?">
</h1>

But this does mean separating images into individual HTML elements, heading paragraphs, list-items etc.

When using an image for a heading like this (or a link), the alt text now has an additional function it needs to perform. It is possible to do this well, but it does add an extra layer of complexity.

And although it is possible, at the time of writing, I’ve not seen a single example of this in a production email.

Text in images does not work well in reader view.

When opening in reader view you will still see the image, it doesn’t pull the alt text out. The point of reader view is to remove all the distraction and make the text easier to read. So keeping the text in an image defeats the point of reader view.

Text readers ignore images

With a text reader, you can highlight some text and have it read out to you. This is different to a screen reader in that is doesn’t have the navigation aspect or the options to interact with the content. It just reads the text.

Generally speaking, text readers are used more by people with reading difficulties, screen readers are used more by people with visually impalements, but they do overlap.

I use a text reader occasionally when there is a word I’m struggling to read. Also, sometimes if I’m concentrating too hard on reading I struggle to take in the content.

Users can’t highlight text

This can be used, to help keep place when reading or to look up the meaning of a word. I do this quite often too.

Text styles are not editable

There are a number of tools and browser extensions that allow a user to adjust the styling of text to make it easier for them to read. For example they may want to adjust the font, colour or size.

These work by altering the CSS, so will only work on HTML and can’t change an image.

Text is not translatable

Translation tools typically don’t look at images and won’t be able to translate the content on the page.

Viewing on small viewports

Images can scale down, but the text can’t flow to a new line. This can lead to unreadably small text on small viewports.

Viewing with zoom or magnify tools

When the image is scaled up, the text will get blurry making it harder to read. You could use very high-res images but that causes other issues.

Other issues

Accessibility is the main concern with text in images, but there are some other things to think about as well.

Doesn’t work very well in inbox search

If a user is trying to find your email, they may do a search for some of the content they remember seeing. Some email clients will include alt text in the search and return your email, some won’t. I’ve not done a lot of testing on this but Yahoo and AOL don’t return results.

Doesn’t work at all in find in page search

When the email is open a user might use the find function (ctrl + f or cmd + f) to look for some content. But that does not include text in images or alt text.

Increases load time of the email

Users have short attention spans, don’t make them wait.

Potential for load error

There are a number of reasons an image might load, it’s not common but it’s an unnecessary risk.

Doesn’t work offline

If there is no internet connection, there are no images. So the user can’t consume your content.

Doesn’t work well when images are disabled

If images are disabled by the email client settings, there are no images. It’s less likely the user will choose to download them if they can’t see much other content to convince them to.

Harder to make quick updates to copy

Changing text in code is very quick and easy, it may not even require a developer. Changing text in an image mostly requires specialist software, then it needs to be exported and optimised.

Harder to personalise content

A lot of people use templating languages to personalise content. There are tools around to help generate dynamic image content but that adds an extra layer of complexity.

Alt text and image text can fall out of sync

If you do make an update to an image, you must also update the alt text. This is an extra added risk that isn’t needed.

AI summaries don’t include alt text

AI summaries of email content are on the rise, at the time of writing these don’t take into account alt text. Some examples from AppleMail show a message like “This message is too short to summerize” or it may include the “Unsubscribe” link text. AI might account for alt text in the future, but it’s likly still going to be treated as lower priority than live text.

Conclusion

I’m not saying never use text in an image, you absolutely can. However, you must consider all the above points.

To some extent, a lot of these issues could be worked around but mostly it’s so much easier to just use text.