1.4.5 Images of text

This is another of the guidelines that I face almost every time I am asked to check a document for accessibility. The guideline says:

If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text.

There are a couple of exceptions, such as text that is part of a logo, but in general, you should really give this one some thought. 

Images of text???

What are images of text and why would you use them? It sounds a bit weird at first, but I'll bet many people do this. Have you ever taken a screenshot of something to use in a document or a web page or as part of a social media post? 

I recently had to fix a document and several of the pages were screenshots of a pdf. There were a few icons but the bulk of it was text. By taking a screenshot, you effectively take text and convert it into an image... an image of text. 

Here's an example of an image of text:

It's only when you really think about it, that you realise how ridiculous this is. Why would you take text, which can easily be read by a screen reader and make it into an image, which can't? Of course you could then copy and paste all the text into the alt text and the screen reader could read that, but it is not good practice. 

So why would you do it?

Word skills

My theory is that this is often done because of poor Word editing skills. Either that, or the text from the pdf is poorly formatted and cannot be copied across easily. I admit, this can take such a lot of time and effort to get right. However, it is important and you should know that just taking a screenshot to get round the problem is contravening WCAG. 

In my opinion, it is always better to spend time doing something the right way. It is worth learning how to edit and format text in Word, since we are now all publishers in one way or another.

An alternative though, would be to link to the original document and specify what page you want someone to look at. Of course, this only helps if the actual pdf is WCAG compliant... which many aren't. 

Creating PDFs

While we're thinking about this, it is worth checking that you are creating pdfs from Word documents so that the text stays as text, rather than converting to an image. It's one of the options in the dialogue box you get when you save as pdf from Word (or PowerPoint). 

The golden rule is to avoid using images of text whenever possible.

My image of text

So how could I have kept my image of text and made it look the same but made it accessible? Well I guess the first thing to consider is what is the main point of the text? If the content is the main thing, just copy it out. You could add some formatting (bold text) to make it similar to the original:

Visitor Information

Opening Times: Open every day of the year.

Public Toilets: Humber Bridge car park and Hessle Foreshore car park.

Accessibility: The park is accessible to people with disabilities, including wheelchair users. Park and enter at the step-free Hessle Foreshore entrance.

Refreshments: Mrs B’s Woodland Café in Humber Bridge car park, The Country Park Inn on Hessle Foreshore.

Dogs: Please keep your dog under close control, and do not disturb wildlife or other visitors.

Tourist Information Centre: In the Humber Bridge car park.

This would suffice in terms of sharing information, but what if I want it to be clear that it is totally separate content? I could put it in a box with a border:

Visitor Information

Opening Times: Open every day of the year.

Public Toilets: Humber Bridge car park and Hessle Foreshore car park.

Accessibility: The park is accessible to people with disabilities, including wheelchair users. Park and enter at the step-free Hessle Foreshore entrance.

Refreshments: Mrs B’s Woodland Café in Humber Bridge car park, The Country Park Inn on Hessle Foreshore.

Dogs: Please keep your dog under close control, and do not disturb wildlife or other visitors.

Tourist Information Centre: In the Humber Bridge car park.

Yes, that would do it nicely! Oooh! How did you do that, I hear you ask? Well, in Word, it is easy because you can highlight your text and use the border tool. This site is in Blogger though, so I switched to html view and put in a div tag around the text and gave it a border style. Obviously, this needs some very basic html and css skills, which not everyone has. It isn't much though. Here's what I used:

<div style="border: solid black 2px; padding:10px;">

The text that was already there.

</div>

I could even put in some more styling in html view to make the heading white on pink, like the original. The point is, it doesn't matter, as long as it's not an image of text.

For those that want to know how to make that heading pretty, here we are:

Visitor Information

Opening Times: Open every day of the year.

Public Toilets: Humber Bridge car park and Hessle Foreshore car park.

Accessibility: The park is accessible to people with disabilities, including wheelchair users. Park and enter at the step-free Hessle Foreshore entrance.

Refreshments: Mrs B’s Woodland Café in Humber Bridge car park, The Country Park Inn on Hessle Foreshore.

Dogs: Please keep your dog under close control, and do not disturb wildlife or other visitors.

Tourist Information Centre: In the Humber Bridge car park.

And here is the html/css I used:

<h3 style="background-color: #e2007a; color: white;">Visitor Information</h3>

The big advantage of learning html and css is that you can do what you like with your text. The editing facility in Blogger is great but it is rather limited and sometimes formats things automatically and doesn't let you change it easily. With some html/css skills, you can very easily switch view and take full control. 

I'll finish though with a quick reminder: 

Don't use an image or screenshot of text. Use the actual text!