Click the Green Button and Other Instructions

Instructions that point instead of name

Click the green button. Use the menu on the left. Required fields are shown in red. Tap the round icon to upload your photos.

Instructions like these are everywhere on small business sites: in forms, help pages, booking steps, and the emails that send people to them.

Each one describes what something looks like or where it sits, rather than what it is called.

That works for the person who wrote it, looking at their own screen. It fails for more of your visitors than you might expect.

Who the instruction fails

• Screen reader users, who hear labels read aloud and never hear a colour.
• People with colour blindness, for whom red and green can look alike.
• Phone visitors, whose layout has moved the right-hand box to the bottom.
• People using magnification, who see a small part of the page at a time.
• Anyone printing the page, often in black and white.
• Everyone after a redesign, when the button stopped being green.

The last is the one that catches every business eventually. Colours and layouts change with each redesign, instructions written around them are rarely updated, and the help page ends up describing a site that no longer exists.

What the guidelines say

The Web Content Accessibility Guidelines, WCAG 2.0, are what most accessibility rules refer to, and two of their basic requirements cover this exactly.

One says instructions must not rely only on sensory characteristics: shape, size, visual location, orientation or sound. The other says colour must not be the only way information is conveyed.

Both sit at Level A, the most basic tier. They are also among the cheapest to meet, since the fix is mostly a matter of rewriting sentences.

In Ontario, private organisations with fifty or more staff must reach WCAG 2.0 Level AA by the start of 2021, apart from the criteria for live captions and pre-recorded audio description. Both rules above are included.

Name the thing by its label

The fix is to refer to each control by the words on it.

Instead of click the green button, write select Book a time. Instead of use the menu on the left, write choose Services from the main menu.

A screen reader announces the button's label, so the instruction and what the listener hears now match. A colour-blind visitor reads the same words on the button they are looking for.

If a button has no words, only an icon, that is the first problem to solve. Give it a visible label, or at least a text label a screen reader can announce.

Colour as a second signal

Colour is useful. It just cannot carry the information on its own.

Required fields shown in red need a word as well, or a marker explained at the top of the form: fields marked with an asterisk are required.

Error messages should say what went wrong, in words, beside the field: enter a phone number with ten digits. Turning the box red is not enough.

Links within paragraphs need more than a colour difference to stand out, usually an underline, since a blue word among black ones can be invisible to some readers.

Position words that break

Left and right are the most fragile words in any set of instructions.

On a phone, a two-column layout usually becomes one column, so the box on the right ends up below everything else. Above and below survive that better, because they still match the order of the page.

Even then, add the name: the form below, headed Request a quote, gives the reader something to find.

A worked example

A small tax preparation office asked clients to upload their slips through its website, using a help page written in a hurry before the season started.

It said: click the blue cloud icon at the top right, then press the green arrow.

On phones, the cloud sat inside a menu, nowhere near the top right. The arrow had no label, and a screen reader announced it only as button.

Through March and April, staff spent hours walking clients through it by phone, several of them older clients using magnification.

The fix gave both controls visible labels, Upload documents and Send. The help page now says: select Upload documents, choose your files, then select Send.

The instructions now hold on every screen size, and staff can read them aloud over the phone word for word.

Instructions outside the website

The same habit turns up in emails, PDFs and phone calls.

A booking confirmation that says use the orange link below fails the same people. If the button is an image, it can disappear entirely when the email program blocks images.

Staff who help callers through the site should describe it by its labels too, since the caller may be on a phone with a different layout from the office screen.

Checking your own pages

Search your site for colour and position words: green, red, blue, left, right, round, square, icon.

Each instruction that uses one needs either the label added or a rewrite.

Then look at your forms on a phone, and in greyscale, which many computers and phones can switch to in their accessibility settings. Anything that stops making sense was relying on colour or position.

Whoever maintains your site can add labels to icon buttons quickly, and should check that each one can be reached with a keyboard as well.

The counter-case

Visual cues still help most readers, and nobody is asking you to remove them.

Select the green Book a time button is fine. The label carries the meaning, and the colour simply helps sighted visitors find it faster.

An internal tool used by three staff on the same office screens is a lower priority than a public booking form. Start with the pages customers use to buy, book or ask for help.

The rule is about relying on appearance alone: name the thing first, and let colour and position support it.

Rewriting the instructions

1. Search the site for colour and position words.
2. List every instruction that uses one.
3. Give every button a visible text label.
4. Rewrite each instruction around that label.
5. Add words to anything shown only in red.
6. Check confirmation emails and PDFs too.
7. Test the result on a phone.

Step three comes before the rewriting for a reason: an instruction can only name a button by its label if the button has one.

Writing clearly where readers most need it is covered in plain language on pages about money.

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.