The big problem with sharing text in images

There's a trend in the way we create and share content at the moment that's harmful for accessibility. Too many of us are enjoying this trend without realising its implications.

I'm talking about sharing text as images. Here are some common examples of where you might have seen this:

Sharing screenshots of text on Twitter.

Using screenshots of emails in blog posts.

email screenshot

Using an image to display a quote in a blog post.

quote image

I'm not exempt from this, either. I've done it myself when sharing email examples in blog posts. But we're making a big mistake by representing text with images.

Why text in images is harmful

The first problem with using an image to show text is it takes away the accessibility for blind and visually impaired users that comes with text. For instance, a blind user might have a screen reader set up on their computer to read out the text and menu items for them. This way they can interact even though they can't see the screen.

Here's an example of how the iPhone's built-in screen reader tech, called VoiceOver, helps a blind user navigate their phone and interact with Twitter:

But a screen reader is more limited than a human reader. It can't read text that's contained in an image like a seeing user can. It simply reads any text it comes across on the screen (including menu items, buttons, and so on). So blind users reading your blog post wouldn't know what the title was if you used an image instead of text. And they'd miss the point of your example emails if you shared them as screenshots. They'd also completely miss your witty humour or wise quotes on Twitter if you're using screenshots to share text.

For a long time I didn't know this was an issue. I don't know any blind people myself, and had never looked into the accessibility options for computers and how they work. It's not something you hear a lot about if you're not part of the right community, because these users are in the minority. But that's exactly why we can't ignore their needs.

Another aspect of this that I didn't know about is how well-suited Twitter is to blind users. As Will Butler wrote for BuzzFeed, Twitter was once the ideal social network for the blind, because it was "linear, text-heavy, streamlined, and digestible, easily consumed via screen reader". Which makes it even worse that Twitter's one of the most common places for this trend to show up.

Will also points out that assuming people with disabilities don't engage with technology is dead wrong (he himself is blind):

It's easy to assume that people with disabilities live a simpler, less technology-saturated life — but actually, that couldn't be further from the truth. The blind, in particular, are often technological obsessives, early adopters, and in most parts of life must be methodical, thoughtful, and purposeful. We can — we must — cut through the GIFs and photos and bells and whistles to use the web in its simplest and most purely functional form.

There's also a bigger problem for all web users. Part of what makes the web so useful is that it's a huge repository of knowledge that's searchable and indexed. Search engines like Google, social networks, and knowledge indexes like Wikipedia rely on the plain text nature of the web for indexing and finding information.

When we put text inside images, we're effectively locking it up so no one can find it again in the future.

But wait, there's more! Here are some other reasons text inside images is bad for accessibility that you might not have considered (I definitely hadn't):

1. Small screen sizes

Screens are great at handling text, because it's created to be resized and still readable. But text inside an image doesn't work the same way. If you use a JPEG file, you'll notice artifacts—those fuzzy grey bits around the text—as the image is resized to be smaller.

JPEG artifacts

This makes the text a lot harder to read for anyone using a small screen.

2. The images might not load

There are various reasons why the images wouldn't load at all. Sometimes ad blockers can be overzealous and stop images from loading. Sometimes using a read later app like Pocket or Instapaper, or an RSS feed reader will stop the images from showing up in a blog post.

Images missing in RSS

Or, maybe the user just has a flaky internet connection so the images won't load.

3. The user can't or won't load images

Just because I have an iPhone with a retina screen doesn't mean everyone does. There are lots of users around the world who have feature phones, which don't show crisp, colour images the way a smartphone does.

Or, regardless of the phone type, a user might not want to load images because they're paying a lot for the data. Another reason Twitter is a great social network (at least in its original form) is that text-based data transfers are much cheaper than those with lots of images.

4. The text isn't translatable

If a user wants to translate your text into their own language, it's impossible when that text is inside an image. Not only can they not have it automatically translated, they can't even copy and paste it because text inside an image isn't selectable.

Now that we know sharing text as images is a problem, we can't justify continuing this trend. We don't have to stop sharing text as images completely, but we need to be more considered in how we do so.

How to make your images more accessible

If you want to keep sharing text as images, there are a few ways to make them more accessible. Here are some options you can start using straight away.

Use text where possible

If you want to share an email or some other text within a blog post, try finding a way to share it as actual text. After all, that's what it is. It doesn't need to be an image. Look for interesting ways to format the text so it stands out, but avoid making it a screenshot if you can.

If it's a quote, try using big pull quotes to make it stand out, for instance. Two good examples of interesting pull quote formatting are in this recent post on the Crew blog and in this Culture Amp article.

If you're sharing something on Twitter, use your tweet to sum up what you're sharing, rather than relying on the image to tell the story. If you're sharing a highlighted article, just link to the article instead. You can use Genius to annotate the web page and share your annotated version so other users can still see which part you found interesting.

Use alt attributes

All images on the web include an alt attribute. Here's why, according to w3schools.com:

The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

Sounds useful for our purposes, right? An alt attribute in the HTML for an image looks like this:

<img src="smiley.gif" alt="Smiley face">

If you're putting text in an image inside your content, use the alt attribute to replicate the text. It might look a little messy in your HTML to have long alt attributes in your image tags but it will let screen reader software read the text so blind readers or anyone who can't load the images can still get the full message from your content.

Some users even reply to tweets with images (so the tweets stay connected) using their reply to share "alt text" for the image.

Use built-in commenting

As Christian Heilmann points out on Medium, if you want to make a note about a particular part of the article, you can quote that section (using text) in your comment, using the site's built-in commenting option. Then you can share your comment (which will get its own URL, usually) on Twitter or other social networks.

If the site doesn't have built-in comments, or they're hard to use, Christian suggests using another medium like Tumblr or Medium to share the quoted section and your thoughts, before sharing that new post on Twitter.

Christian points out that Twitter is good for specific use cases:

It is a global chat room. Go and chat. Use the web to write and point to it with Twitter.

If you publish text as images to give context you put your own needs above the ones of your readers. You better be super important if that is how you act. Somehow I doubt you are. I know I am not, that’s why I keep to 140 chars, that’s why I add alternative text when I can, and that’s why I don’t publish my tweets as videos or interpretive dance. — Christian Heilmann

There's a reason this trend is gaining momentum: we all like looking at pictures. Plus, it's quick and easy to share an image rather than typing or copying-and-pasting text.

But if you're a content creator, taking the quick and easy route is no excuse for excluding users by making your content inaccessible. These options are all feasible, and you've got a variety to choose from depending on the situation.

I'd love to hear more options, too. If you know other ways of making text-as-images accessible, or better alternatives, let me know in the comments.

Image credits: JPEG artifacts via Harder, Better, Faster, Stronger.