Microcopy refers to the small bits of text on a site that help instruct the user and alleviate any concerns. Examples include instructions at the top of a form, a description of what a page does, form field help, icon descriptions, etc.
Microcopy can make or break a website’s experience – imagine trying to complete a form where you don’t know the field formats, or why to provide information, or what it’d be used for. People aren’t very fond of those. Alternatively, too much microcopy can be a distraction from the task at hand. So like everything else, it’s a matter of striking the right balance.
That balance is even more challenging when the user cannot see the screen or has cognitive issues understanding the screen. Making microcopy accessible is critically important.
Seven Guidelines for Writing Microcopy
Kinneret Yifrah and Retem Binheim recommend the following seven guidelines for writing microcopy.
Think top-down and left to right.
Placing the microcopy in front of the action is crucial. It’s important not to put instructions after the field they refer to.
The accessible order of elements is Label then Instruction or Hint then Field.
Never place any microcopy under a confirmation button.
Be witty, but not at the expense of the plain message.
If the person using the site can’t see the screen, is it still clear where they are and what comes next?
For errors or empty states, make sure that the user is told the page isn’t found or there are no results, etc. and what to do afterward.
For sign-up and login screens, don’t forget to say what the page is about.
For confirmation and error messages, make sure the message is unequivocally expressing that it’s a confirmation or an error. Do they know what to do next? Do they know how to find the errors?
Provide a written alternative to every icon and every image
If it provides meaning, it should have an alt description.
If it doesn’t provide any useful information to enhance understanding, explicitly prevent it from being read out.
A “more information” or help icon should ideally say what comes next such as “How to choose a password”.
Note that emojis have preset alt text, and you should probably know what it says before you use one.
Be more descriptive than Read More for links and buttons
Read Links for more information.
All microcopy should appear as live text, not as an image
If you can’t understand the site without knowing what text is on an image, it had better either be described in the alt text or be live text with a background image. A 404 message with a hero image that has embedded text doesn’t tell the user that they’re on a 404 error page unless there’s a great alt tag on it.
Put permanent text in high contrast
All instructions, hints, notes, etc. should always be available either as permanently visible text or a tooltip you can return to and read at any point in time. (Default to permanent.) Placeholder text that disappears as soon as the field comes into focus are inaccessible to everyone including sighted users. Placeholders that change location may be passable for visually impaired users but confuse users with cognitive impairment.
All microcopy should appear in high contrast to the background so that users with vision impairment or dyslexia can easily see or read it.
Placeholder text should also be high-contrast unless it’s not pertinent, in which case just remove them altogether.
Simple is best
How clever should your microcopy be? It should be exactly as clever as someone with a visual or cognitive disability (or non-native English speaker, etc.) can understand. It has to make sense first. Wittiness should never sacrifice understanding.
Additional resources
- Mailchimp style guide: Writing for Accessibility by MailChimp