Form Errors Shown Only in Red

A form that turns red and says nothing

Someone fills in a form, taps send, and the page comes back. Two boxes now have red outlines, and a line at the top, also in red, asks them to correct the highlighted fields.

For many people that is enough. For someone who cannot tell red from grey, the form looks almost exactly as it did, except that it has not been sent.

A screen reader user may hear that something needs correcting, but not what, because the highlighting itself is never announced. On a phone, the boxes in question may be three screens further down.

And many such forms have emptied every field, so whoever tries again starts from the beginning.

Who misses a red outline

• People with colour blindness, to whom red can look brown or grey.
• Screen reader users, who hear text but not colour.
• People with low vision who zoom in and see one field at a time.
• Anyone on a phone outdoors, where glare washes colour out.
• Older eyes, which struggle with thin, faint lines.

There are more colour-blind customers than most owners imagine, most of them men. A thin red border beside a thin grey one is a difference many of them cannot see at all.

What the guidelines say

WCAG 2.0, the guidelines most websites are measured against, covers this directly. Its rule on colour is short: anything shown by colour must also be shown some other way, in words or in shape.

When a form detects a mistake automatically, it must identify the field in error and describe the problem in text. Where the fix is known, the message should suggest it.

The rules on colour and on identifying errors are both level A, the most basic requirements in the guidelines. A red outline on its own fails both.

Errors in words, beside the field

Each message belongs beside its own field, saying what went wrong and how to put it right: 'Enter the phone number with its area code', not 'Invalid entry'.

Start the message with a symbol or the word Error, so it stands out without colour. Red text is fine as well, as long as the words do the work.

In the page's code, each message should be linked to its field, so a screen reader announces both together. It is a small job for whoever builds the form, and an easy one to forget.

Keep what was typed

A form that returns empty after one mistake asks the person to do the whole thing again, and many will not.

Everything typed should come back exactly as entered, with only the faulty fields marked. Passwords and card numbers are the usual exceptions, cleared deliberately by some systems; say so beside the field when that happens.

Attached files are the other exception, since a browser will not attach them again by itself. Say plainly that the photo or document needs adding again, rather than letting it vanish without a word.

A summary, and the focus on it

When a form comes back with errors, a short summary at the top should say how many problems there are and list each one by the name of its field, with a way to jump straight to it.

After a failed send, move the focus to that summary. A screen reader then announces it, a keyboard user starts from it, and on a phone it scrolls into view.

Checking each field as the person leaves it catches mistakes earlier. Wait until they have finished typing, though; a warning that appears after the first letter of an email address is just noise.

A worked example

A piano teacher with about thirty students takes registrations for each term through a form on her website: the child's name and birth date, a parent's phone number and email, preferred lesson times and any exams already taken.

Last September, a father tried to register his daughter three times, then gave up and emailed. Each time the form came back with two fields outlined in red and a note asking him to correct them.

He is colour blind. To him the outlines looked like every other border on the page, and each attempt also cleared the child's name, the times and the notes he had typed.

The faults were small: a phone number typed with dots instead of dashes, and a birth date in a different order. The form rejected both and explained neither.

The form was rebuilt before spring registration. Errors now appear in words under each field, everything typed stays put, the page opens at a summary of what needs fixing, and the phone field accepts dots, spaces or dashes.

The teacher also realised that the occasional registration by email had been coming from parents who quietly gave up on the form.

Ask for less, accept more

The best error message is the one that never has to appear. Accept phone numbers with spaces, dashes or dots, postal codes with or without the space, and email addresses typed in capitals.

Show the expected format in the label, such as day, month and year, before anyone gets it wrong. Leave out any field you do not actually need.

Testing your own forms

Fill in each form on your site wrongly, on purpose: leave a required field empty, type a letter into the phone number, send it. Then look at the result as a stranger would.

Look again in shades of grey. iPhones and Macs have an accessibility setting that removes colour from the screen, and it shows at once what depends on red.

VoiceOver, the screen reader built into the same devices, shows within a minute whether an error is ever announced.

The counter-case

A two-field form for a name and an email address has little that can go wrong, and a short message above the button may be all it needs.

Forms supplied by booking or payment services may not be yours to change. Ask the provider how its errors are shown, and raise it when you choose one.

Red is not the enemy either. It helps people who can see it, as long as words beside the field carry the same message for everyone else.

Fixing a form

1. Submit each form wrongly on purpose.
2. Write each error beside its field.
3. Add a summary at the top.
4. Keep everything the person typed.
5. Move focus to the summary after sending.
6. Accept common formats for phones and postal codes.
7. Check the page in shades of grey.

Step four decides whether people try again. A clear message helps someone fix one field; an empty form tells them to start over, and many simply do not.

Contact details that only some visitors can read are covered in phone numbers and addresses shown as images.

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.