What is Microcopy?
According to Adobe, "...microcopy refers to the tiny tidbits of copy found on websites, applications, and products - from the words that comprise a call to action, to the disclaimers that assure users that their email address won’t be shared or stored. These short sentences tell a user what to do, address user concerns, provide context to a situation, and help tell the greater story about your brand, product, and the way you do business."
The role microcopy plays in the user experience can make the difference between establishing trust with your user through a more authentic experience or leaving your user confused, frustrated, and looking for another resource or product other than yours.
This is especially true for users of assistive technology like screen readers. Creating accessible microcopy can go a long way in creating a truly inclusive experience for all your users. Here are just a few tips to help make that happen.
- Think top-down and left to right
Using a screen reader requires using a keyboard to navigate a website. Using a keyboard moves the focus on each element from top to bottom and left to right. Therefore, placing microcopy in front of the action (i.e., helping users complete a task or prevent an error) is critical.
- Use live text, not images
Using correctly structured, semantic HTML for text is always preferred over using images of text. Live text is much easier for a screen reader to read and therefore, creates a much better experience for the user. If you absolutely must use an image for your microcopy, make sure the ALT text is clear, concise and conveys the exact information the user needs to know. This is also true for any icons that include information / instructions critical to the success of the user.
- Use descriptive link and button text
When navigating a webpage using only a keyboard, the user can jump between sections like "focus on headlines only" and "focus on links and buttons only." Can you imagine using a screen reader and hearing "Learn More," "Learn More," "Click Here," and "Read More" repeated over and over? How does "Read More" tell the user what information can be found if they are to click that link or button?
Also, never use the URL as link text unless you are designing a document for print only. Screen readers read out the entire URL, character by character. Imagine what this URL "sounds" like: https://www.nytimes.com/2022/02/13/opinion/culture/pandemic-languishing-behavioral-activation.html?utm_source=pocket-newtab
- Readability: Permanent text presented in high contrast
"All the instructions, hints, and notes regarding filling a form or taking any other action should always be available—permanently visible or in a tooltip you can return to and read at any point in time." ~ 7 guidelines for writing accessible microcopy
And finally, ALL microcopy should appear in high contrast. Remember, according to WCAG 1.4.3 Contrast (Minimum) Level AA the visual presentation of text and images of text has a contrast ratio of at least 4.5:1 (Note: there are exceptions, so please read WCAG 1.4.3 fully.)
