Accessibility in UX Microcopy

The placement of microcopy should be as strategic as the microcopy itself. Important microcopy, such as explanations and tips for form fields, should never be placed after the input. When users are navigating with a screen reader, they’ll reach the form input before reading the helper text, making the form considerably more frustrating and less accessible.

The same goes for confirmation buttons. If important text (like checkboxes for agreeing to terms) appears under the confirmation button, users using screen readers are unlikely to ever read that text.

Empty states are often overlooked but can be especially inaccessible for some users. For those using screen readers, adding clear text that explains an empty state’s purpose significantly improves usability. Plain language helps not only screen reader users but also users who might miss subtler cues, like those with cognitive disabilities or non-native language speakers.

Plain language should extend beyond empty states to all key microcopy. You can maintain brand personality while being clear — rather than vague text like "Get the latest" for a newsletter, try "Sign up for our newsletter to get the latest." This approach sets clear expectations and retains the brand's voice.

Use language that aligns with your users’ vocabulary. For instance, in a ride-sharing app, use "rides" instead of less familiar terms like "commutes" or "drives." This helps users immediately connect with the app’s functions.^[1]

Consider how your users naturally refer to your product's features. While unique branding language can be tempting, it often leads to confusion. Especially in the early stages, prioritize clarity over branding to improve user experience and reduce misunderstandings.

Conventional wisdom says that you should use alt text for every image in your design. However, that’s not necessarily true. If you include images that are purely decorative and don’t have any bearing on the actual content of the page, it’s okay to skip alt text for those images. Why? Because screen readers can already overwhelm users with too much information on a page that’s content-heavy. Adding more information that’s not really relevant to the content of the page just adds to the overwhelm.

So when should you use alt text for images? You can use it for:

• Images that contain important information
• Images that reinforce a message on the page
• Diagrams, data visualizations, and infographics
• Icons, especially when they’re not accompanied by a label

Alt text should always be clear and descriptive. This is not the time to try to be clever or humorous.

When someone is using a screen reader, a link that simply says "Continue" or "More" can be confusing. Using a more descriptive link, such as "Read more about [topic]" gives those using screen readers instant information about what they’re clicking on.

Being more descriptive, in general, across your microcopy can improve accessibility in design. Making it clear exactly what will happen when someone clicks on a link or performs an action removes uncertainty and builds user trust.

When microcopy is embedded in an image (rather than as separate, selectable text on the page), screen readers can’t access it. This is a common issue with text on buttons, banners, or graphics, where visually crucial information is effectively hidden from users who rely on screen readers.

For accessibility, it’s best to use live text — text that’s separate from images and can be read by screen readers and adjusted for user preferences (like zoom or text-to-speech). If you must include text within an image, ensure that the same information is added in the image's alt text. For example, if the image shows a card with the text “Track your daily habits to build consistency” alongside someone working out, the alt text could be:

"Card with the text: 'Track your daily habits to build consistency,' featuring an illustration of a person lifting weights."

Placing labels inside form inputs causes them to disappear when users start typing, which can create challenges for screen reader users and those with cognitive disabilities. Don’t rely solely on placeholders either, as they aren’t a substitute for labels and can cause confusion. Instead, keep labels outside form inputs so they remain visible. You can still add placeholder text inside (e.g., "[email protected]" for an email), but ensure it has good contrast for readability.

When a user completes an action (like sending a message), provide an accessible acknowledgment to confirm the action happened. This feedback informs users about background system actions and may offer options, like undoing the action.^[2]

What does "accessible" mean here?

• Duration: Ensure the acknowledgment stays visible long enough for all users, including those with screen readers, slower reading speeds, or visual impairments. Ideally, keep it on screen until the user navigates away.
• Clarity: The message should clearly state what action was taken. Acknowledgments can appear as snackbars, alerts, or dialogs, with appropriate urgency and options to undo and dismiss.

Keep in mind that acknowledgments differ from confirmations, which require user input to proceed with potentially harmful actions.^[3]