Anything a customer needs to read, tap or find, such as the phone number, hours, menu and offers, should be real text rather than part of a picture. Logos and photographs stay as images, with alt text.

The phone number that is a picture

On many small business websites, the phone number in the header is not text. It is part of an image, set in the logo's font, because that is how the designer drew it.

The opening hours are a graphic in the footer. The menu is four photographs of the printed one. This month's offer is a banner made in a design app, with the details written across the picture.

On the designer's screen, all of it looks right. For some visitors, it is not there at all.

What a picture of text cannot do

The second is the one that costs a business most directly.

A phone number set as text can be tapped to call on any phone. A picture of one has to be read, remembered and typed, by somebody who was ready to call a moment ago.

What the standard says

The current web accessibility standard is WCAG 2.1, published last June. Most rules still refer to version 2.0, and on this point the two agree.

Its images of text criterion, at level AA, says that where text can be presented the way you want, it should be real text rather than a picture of it.

Logos are exempt, as are cases where a particular appearance is essential. A separate criterion, at level A, requires a text alternative for every image that carries meaning.

Ontario's accessibility law requires larger organisations there to meet WCAG 2.0 AA by 2021. Most small BC businesses face no specific website rule, but their customers include the same people.

Why it keeps happening

Text ends up inside images for understandable reasons. A designer builds a banner in a graphics program with the words included, and exports the whole thing as one picture.

A poster made for the window gets uploaded as it is. A restaurant photographs its printed menu, because retyping it feels like duplicate work.

The old technical reason has gone. A decade ago, a distinctive font on a website often meant an image; web fonts now let real text appear in almost any typeface.

Phone numbers and addresses

The phone number belongs in the header of every page, as text, marked up as a link that dials when tapped.

The address belongs on the contact page and in the footer as text, linked to a map, and written exactly as it appears on your Google My Business listing.

Both can still be styled to match the brand. The font and colour come from the site's design; the words stay words.

Hours and menus

Hours set as a graphic have a second problem: changing them means finding the original design file, and often the person who made it. So they do not get changed.

As text, in one place on the site, they take a minute to update.

Menus are the largest case. A menu typed as a page, with sections and prices, can be read on a phone without pinching, searched for a dish, read aloud, and updated when a price changes.

A PDF can sit alongside it for people who want to print. A scanned menu, in a PDF or not, is still a photograph of text.

A worked example

A family restaurant on a main street had a menu page made of four photographs of the printed menu, taken on the counter.

The hours were a graphic in the footer, and the phone number in the header was part of the logo image.

On phones, the menu had to be pinched and dragged to read, and a screen reader announced four images and nothing else.

The hours graphic still showed the winter schedule in July, because nobody could find the file it came from.

The menu was typed into a page, section by section, with prices, and the printed version kept as a PDF for anyone who wanted it.

The hours became text in one place, and the phone number became a tap-to-call link beside the logo. The logo stayed an image, with the restaurant's name as its alt text.

Offers and banners

Promotional graphics are where text inside images multiplies, because each new offer brings a new picture.

The fix is to separate the two. The photograph stays an image; the words, the price and the expiry date sit beside it or over it as real text.

That also makes the expiry date editable, which matters more than it sounds. An offer that ended in December, baked into a banner, tends to stay on the home page until the next redesign.

Alt text for the images that remain

Alt text is a short description attached to an image, read aloud by screen readers and shown when the image fails to load.

For a logo, it is the business name. For a photograph of your work, it is what the photograph shows: a rebuilt brick chimney on a heritage house, not a string of search phrases.

Decorative images, such as background patterns, should have an empty alt attribute, which tells screen readers to skip them.

VoiceOver on the iPhone and TalkBack on Android will read your home page aloud, which is the quickest way to hear what is missing.

The counter-case

Not all text in images is a problem.

A logo is an image and should stay one. A photograph of your storefront sign, or a historic document shown as it looks, carries its text as part of what it is.

A designed graphic on Instagram is also fine there, since that is the format the platform expects. The question is what happens when the same graphic is put on your website.

Anything a customer needs to read, tap or find belongs in real text.

The check

  1. Try to select the phone number with your finger.
  2. Make the number a tap-to-call link.
  3. Type the hours as text in one place.
  4. Rebuild the menu as a page of text.
  5. Move offer wording out of the graphics.
  6. Write alt text for every meaningful image.
  7. Listen to the home page with a screen reader.

Step one is the test that finds the problem in seconds. Press and hold on a phone, or drag across with a mouse: real text highlights, and a picture of text does not.

Hours and offers that go stale are covered in your footer still says 2018.

Frequently asked questions

Why is text inside an image a problem?

Screen readers cannot read it aloud, phones cannot tap it to call, search engines cannot reliably read it, and it blurs when enlarged or viewed on a small screen.

What does WCAG say about images of text?

WCAG 2.1, the current standard, says at level AA that text should be real text wherever the same presentation is possible. Logos and essential cases are exempt.

Should a restaurant menu be a PDF?

Not instead of a page. Type the menu as text so it reads on a phone and can be updated, and offer a PDF alongside for printing.

Can real text match our brand fonts?

Yes. Web fonts let real text appear in almost any typeface, so the old reason for setting phone numbers and headings as images has gone.

What should alt text say?

What the image shows or does: the business name for a logo, a short description for a photograph, and nothing for purely decorative images, which screen readers then skip.

How can I check my own site?

Try to select the text: press and hold on a phone or drag with a mouse. If it does not highlight, it is a picture.

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.

Phone number built into your logo?

Send us a link to your site. We will list every piece of text set as an image and rebuild it as real text.

Start a Conversation