Put the phone number, address and email address in real text, styled to match the design. A picture of them cannot be read aloud, tapped, copied, enlarged cleanly or read by search engines.

Text that is really a picture

Look closely at the top of many small business websites and the phone number turns out to be part of the logo graphic, drawn in the same script typeface and saved as one picture.

The address in the footer is often the same: a strip of artwork exported from a design program. Sometimes the email address is an image too, deliberately, to keep it away from spammers.

To most visitors it looks like text. To a screen reader, a phone, a search engine and anyone who wants to copy it, it is a picture with nothing in it to read.

What a picture of a number cannot do

The second costs the most directly. A visitor on a phone who wants to call now has to read the number, remember it, switch screens and type it, and some will simply tap the next business instead.

Why contact details end up as images

The usual reason is a typeface. The designer wanted the phone number in the same script as the logo.

For years the only dependable way to show an unusual font on every computer was to draw it as a picture. Web fonts changed that: every current browser, Internet Explorer 11 included, downloads the typeface with the page.

The other common reason is spam. Owners set their email address as an image so automated harvesters cannot collect it, which also stops every real customer from clicking or copying it.

What the standard asks for

The accessibility guidelines known as WCAG 2.0 make two points that apply here.

At level A, every image that carries information needs a text alternative: the alt text a screen reader reads aloud.

At level AA, information should be real text rather than an image of text wherever real text can achieve the same look. Logos are the obvious exception.

A phone number in a script font is not a logo, and a web font can draw it, so the exception does not apply.

Alt text is a patch, not a fix

If the image has to stay for now, give it alt text that says exactly what it shows: the number, the address or the email address, written out in full.

That lets a screen reader read the details aloud. It does nothing for the phone that cannot dial, the customer who wants to copy the address, or the person who enlarges the page to read it.

A worked example

A sleep clinic in a medical building runs overnight sleep studies and sees patients referred by their family doctors.

Its header was a single image: the clinic's name in a soft typeface, with the phone and fax numbers beneath in the same font. The address appeared only inside a screenshot of a map.

Doctors' offices sending referrals had to retype the fax number from the screen, and more than one called to check it. Many patients were older, some reading with the page enlarged, and saw a blurred number.

On a phone, nothing in the header could be tapped, and the map could not give directions to the building's entrance.

The rebuild kept the logo as an image, with the clinic's name as its alt text. The phone and fax numbers now sit beside it as real text in a matching web font, and the phone number dials when tapped.

The map screenshot gave way to the address in text, a link for directions, and a line about parking and which door to use.

What search engines can match

Search engines learn what a business is and where it is from the words on its pages. An address that exists only inside a picture gives them nothing to compare with your Google My Business listing.

A phone number in text can also be found by searching for it, which is how people often check an unfamiliar number that called them or appeared on a flyer.

And once the number is text, it can be marked up as a call link, beginning with tel: rather than http:, so a phone offers to dial it with one tap.

Addresses and maps

Write the address out as text on the contact page and again in the footer, worded the same way everywhere it appears, including your Google My Business listing.

A screenshot of a map is a picture of a picture. Visitors cannot zoom into it, get directions from it or see where they are in relation to it.

A link to the address on Google Maps, or a map embedded from it, does those jobs. The written address beside it does the rest, for screen readers and search engines alike.

The email address and spam

Hiding an email address in an image keeps away some harvesters and every customer who wanted to copy it into a message.

A contact form is one alternative: the address does not appear on the page at all, and the form can be protected against automated submissions.

Where the address needs to be visible, as it often does for people who prefer their own email program, show it as text and let the spam filter do its work.

The counter-case

Not every piece of text in an image is a problem. A logo is artwork and stays an image, with alt text that gives the business name.

If a rebuild is already booked for the spring, the header can wait for it, provided accurate alt text goes on the images this week.

The phone number, the address and the email address are working information, and working information belongs in text.

Text, not pictures

  1. Drag across the phone number to see if it highlights.
  2. Do the same for the address and email.
  3. Rebuild image details as text in a web font.
  4. Turn the number into a call link for phones.
  5. Replace map screenshots with text and a map link.
  6. Give the logo alt text with the business name.
  7. Listen to the header with a screen reader.

Step four is the one customers notice first. On a phone, a number that dials with one tap saves the visitor holding ten digits in their head between screens.

Contact details baked into images also go stale, the same warning sign described in the footer still says copyright 2013.

Frequently asked questions

Why is a phone number image a problem?

Screen readers cannot read it, phones cannot dial it, visitors cannot copy it, it blurs when enlarged, and search engines cannot rely on reading it.

Can real text match our logo font?

Yes. Web fonts let a site download its own typeface with the page, and every current browser supports them, so the number can be real text in the same script.

Which WCAG 2.0 rules cover contact details?

At level A, images carrying information need a text alternative. At level AA, information should be real text rather than an image of text wherever that achieves the same look.

Is alt text on the image enough?

Only as a stopgap. Alt text lets a screen reader read the details, but the number still cannot be tapped, copied or enlarged cleanly.

How do I make the number tappable?

Write it as real text and mark it up as a call link, beginning with tel:, so any phone offers to dial it with one tap.

Should my email address be an image?

No. It stops customers copying it as well as harvesters. Use a contact form, or show the address as text and let the spam filter work.

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 drawn into the header?

Give us your site's address. We will find each contact detail shown as a picture and rebuild it as text.

Start a Conversation