Promo Codes Hidden Inside Images

A code inside a picture

The holiday banner looks good: a photograph of a gift box, a ribbon, and across it, in a festive typeface, the code for the offer and a line of conditions in small print.

All of it, code included, is one image file. On the designer's screen it is perfectly clear.

For a customer using a screen reader, there may be no code at all. For a customer on a phone, the code has to be memorised and retyped. For search, the offer does not exist.

December is when these banners multiply, so this week is a good time to check them.

What the picture prevents

• Hearing it, for anyone using a screen reader.
• Copying it on a phone and pasting it at checkout.
• Finding it with a search, on the site or off it.
• Enlarging it without the letters blurring into the background.
• Seeing it at all when images are blocked or slow.
• Translating it with the browser's own tools.

The second affects every customer, not only those with a disability. A code in text can be pressed, copied and pasted into the checkout field; a code in a picture has to be read, remembered and typed with a thumb.

What the guidelines say

The Web Content Accessibility Guidelines cover this in two places, unchanged between version 2.0 and this year's 2.1.

Success criterion 1.1.1, a level A requirement, asks for a text alternative to any image that conveys information, so assistive technology can present it another way.

Criterion 1.4.5, at level AA, goes further. Where the technology can show the words themselves in the intended style, use real text rather than a picture of text. Logos are exempt, as is text whose particular appearance is essential.

A promotion banner is neither a logo nor essential. A code and its conditions set inside one fail the second criterion, even when the image has a description.

Why a description is not enough

Alt text, the description attached to an image in the page's code, is still worth writing. It tells a screen reader what the banner says, which solves the first problem.

It does nothing for the others. Alt text is normally invisible, cannot be selected and copied on a phone, and does nothing for someone zooming in to read.

Many banners lack even that, and a screen reader announces the file name instead, something like holiday banner final two.

So write the description, and put the code in text as well.

Typing a code from memory

On a phone, the trip from banner to checkout is long. The shopper reads the code, opens the cart, finds the field, and types the code from memory with the keyboard covering half the screen.

Many codes make it harder than it needs to be: a stylised font where capitals and small letters look alike, a zero that could be the letter O, a one that could be an I.

When the code is refused, the shopper cannot tell whether they mistyped it or the offer has ended. Some try again. Some leave the cart where it is.

A worked example

A candy shop in an old downtown storefront sells boxed assortments online through December, alongside the shop itself.

Its holiday code appeared in a banner image on the home page, in the same graphic on its Facebook page, and as a picture at the top of its email.

The code contained both a zero and the letter O. Customers wrote to say it did not work, and on phones the line saying which boxes it covered was too small to read.

One customer who uses a screen reader phoned to ask what the offer was, because her screen reader had read out the banner's file name.

The shop's web company rebuilt the banner as text on a coloured band beside the photograph, in the shop's own typeface. The code was changed to letters only, with the conditions underneath in full.

The Facebook post and the email now carry the code in their text as well, and the photograph has a short description of the boxes.

The terms belong in text too

The small print matters as much as the code: when the offer ends, with its time zone, which products it covers, any minimum order, and whether it combines with other offers.

Set inside an image, those terms are the first thing to become unreadable on a phone, and the likeliest cause of an argument at checkout.

As text, they can be read at any size and corrected in a minute if anything changes.

Designing it in real text

None of this means giving up the look. A banner can be a photograph or a colour block with real text placed over or beside it, set in the brand's typeface through web fonts.

Real text also reflows on a phone, so a long code or a line of conditions wraps neatly instead of shrinking with the image.

Check the contrast between the words and what sits behind them, especially over photographs. Pale text on a busy picture is hard for anyone to read.

Codes nobody has to type

The best code is one the customer never handles. Many store platforms, or extensions to them, can apply a discount automatically at checkout or through a link that carries the code.

Where that is possible, put the link in the email and the post, and keep the written code for people who arrive another way.

Choose codes that survive retyping anyway: short, letters only or numbers only, and nothing that depends on capitals.

The counter-case

Not every picture with words in it is a problem. A logo is exempt, a photograph of a shop sign is simply a photograph, and a purely decorative image needs no description at all.

A social media graphic can carry words for impact, provided the same words appear in the post's own text.

But a code, a price, a date or a condition that a customer must act on should never exist only as a picture. Put it in text, every time it appears.

Before the next code goes out

1. Find every banner carrying a code.
2. Try copying each code on a phone.
3. Rebuild the banners with real text.
4. Write the terms underneath, in full.
5. Describe the images that remain.
6. Repeat the code in post and email text.
7. Choose codes without look-alike characters.

Step two takes thirty seconds and settles the question. If the code cannot be pressed and copied on your own phone, every customer is retyping it from memory.

The field and button the code goes into have their own problems on a phone, as covered in touch targets too small for fingers.

Frequently asked questions

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.