Accessible UX Writing: Microcopy, Alt-Text, and Screen Readers

More Than Just Visuals

As a UX designer, I've come to realize that thoughtful UX writing, effective use of alt-text, and understanding how screen readers work across platforms are just as crucial for creating the best UX as visual design aspects. Ensuring a seamless experience for all users, regardless of ability, means creating content that works both visually and non-visually. Over the years, I’ve learned that accessible UX writing is not primarily about meeting legal requirements but about creating digital products that everyone can engage with on equal terms. It’s not just about checking a box – it’s about inclusion at every level.

Microcopy: Small Words, Big Impact

Microcopy, although often overlooked, plays a pivotal role in accessibility. It includes those small, functional pieces of text – like button labels, tooltips, error messages – that guide users through an interface. But, first things first, let’s distinguish microcopy from other textual content. While some texts serve to market services within a digital product (marketing copy) or are intended to provide legal protection (legal copy), microcopy concentrates exclusively on the functional description of the digital product. Of course, marketing and legal text blocks are also important and should be written just as clearly as microcopy. However, they don’t primarily contribute to making the app easier to use. 

The key to writing inclusive microcopy is balancing clarity and brevity. While adding personality or cleverness to these small snippets is tempting, clarity must always come first. Clear and easily understandable communication trumps cleverness every time. Even though some brands want to inject charm into their microcopy, everyone needs to understand the text, especially users with disabilities. It’s different from marketing or legal text – it’s functional. It must be clear, direct, and supportive, ensuring users know what to do next. For users relying on assistive technology like screen readers, overly clever or vague text can be frustrating and lead to confusion. Microcopy must be designed to give precise and actionable instructions that leave no room for misinterpretation. Accessibility also means using simple and easy-to-understand language that anyone can comprehend. When you finish a text and re-read it, you have to ask yourself: Is everybody going to be able to understand my message when they read or even just hear my words?

Another essential aspect of microcopy is anticipating user needs. This is especially important when things go wrong. A well-written error message doesn’t just tell the user that something went wrong – it guides them toward fixing it. Imagine you’re trying to log into your banking app, and an error message pops up saying, 'An error occurred!'. This could easily leave you feeling nervous or unsafe. Now, imagine there’s an additional message saying, 'Still having trouble logging in?' with a helpful 'Contact Us' button next to it. You’d feel much safer, right?

This is just one of the many possible use cases where microcopy can make or break a person's experience, especially for those who are already facing challenges with accessibility. By offering clarity, guidance, and reassurance, you can help a person complete a task without unnecessary friction. Microcopy might be small in size, but it carries significant weight in shaping user experiences, especially for those with disabilities.

Alt-Text: Descriptions Beyond the Visual

Alt-text is another crucial piece of accessible UX design, particularly for users who rely on screen readers. Whenever there’s a problem with your digital product, e.g., delayed loading times, alt-text will be the only alternative to describe the content of your visuals, which aren’t displayed, even for users who can see the design. For people who can’t see the visual UI elements, alt-texts become the only way to still have access to this information. 

So, if you take our error screen example from above, it wouldn’t be helpful if your message was simply represented by a funny image. If the image doesn’t load and there’s no alt-text applied for it, as a user, you wouldn’t even know that something went wrong. 

However, writing good alt-text involves more than just stating what’s shown within an image. It’s about translating the image's function in the screen's context. If an image conveys important information, like a chart, a map, or even a meaningful image, the alt-text needs to provide a clear and concise explanation of the information these visuals carry. Here’s a simple example: If you have a button with a house icon, it’s not enough to let the screen reader read ‘house icon’ – the alt-text should be something like ‘Home button’ because that’s what the image represents in terms of functionality.

Writing effective alt-text requires a clear understanding of the image’s role. Is it purely decorative, or does it provide essential information? Decorative images or images that don’t add meaningful information to the user experience should often be left without alt-text so that they don’t clutter the experience for screen reader users. For the images that do matter, the goal is to be specific enough to transfer the purpose but concise enough not to overwhelm the user.

Screen Readers: Differences between Operating Systems

In order to make digital content accessible to visually impaired users, assistive technologies like external keyboards or screen readers play a major role. However, designing for screen readers on web platforms differs significantly from designing for mobile apps. One of the biggest differences lies in the interaction patterns available on mobile devices. Desktop screen readers typically rely on keyboard navigation, while mobile devices use gestures, such as swiping and tapping, to move through content.

When designing for screen readers, the order in which content is read out loud becomes crucial. Screen readers follow a specific order, which can be manipulated to create a more intuitive experience. For example, if a user navigates a page with a complex layout, such as a live navigation, adjusting the reading order to prioritize key elements can dramatically improve the user’s experience. It might be helpful to tell the screen reader to ignore the linear so it will jump to the footer element of the screen, as this contains the information that’s essential for the next step in the routing instead of dealing with the interaction elements to center the map. It’s all about creating an intuitive, logical experience for the user.

Mobile users also interact differently with content due to the way VoiceOver (on iOS) and TalkBack (on Android) handle gestures. I had to learn that VoiceOver and TalkBack have distinct gestures and navigation patterns, and these differences must be accounted for when designing a seamless experience across platforms.

Understanding iOS and Android: Platform-Specific Considerations

Though both iOS and Android strive to make their platforms accessible, the ecosystems of these operating systems differ in several ways. iOS tends to be more standardized, which is both a benefit and a limitation. Apple’s tight control over its devices ensures that users get a consistent experience across its ecosystem, whether they’re using an iPhone, iPad, or MacBook.

In contrast, Android’s product landscape is more fragmented, with many different manufacturers creating devices with varying screen sizes, operating systems, and accessibility features. Android’s flexibility is both a blessing and a curse for accessibility. It allows designers more creative freedom but can also create challenges when trying to maintain consistency across such a broad range of devices.

For example, Android might offer different navigation patterns based on the device’s manufacturer. Although we generally don’t need to create separate alt-texts or microcopy for iOS and Android, it’s essential to understand how each platform interprets and presents that information. At the end of the day, it’s about making sure the experience is as consistent and accessible as possible, regardless of the platform. You don’t want users to feel like they’re having a completely different experience just because they’ve switched devices.

Testing your designs on both systems and making adjustments to optimize for each platform is crucial for ensuring users don’t get stuck or lost as they navigate your product. You don’t always have to write separate alt-texts or microcopy for iOS and Android, but you do need to be aware of how each platform might interpret or present that information differently.

Designing with Empathy

Incorporating accessibility into UX writing isn’t just a technical challenge and following guidelines; it’s a matter of empathy. It's also about understanding the experiences of all users, including those with disabilities, and making sure everyone can engage with digital products equally. Whether it’s making sure microcopy is clear and actionable, alt-text offers meaningful descriptions, or screen readers navigate content smoothly, the ultimate goal is to create an inclusive experience for all users.

Accessibility in UX writing means thinking beyond the visible. Every piece of text, every description, and every bit of content needs to be crafted with empathy, considering how it will be experienced by users with different kinds of abilities. Ultimately, you’re designing for people, and it’s your responsibility to ensure everyone can access and enjoy the digital products you create. By putting accessibility at the forefront of your design process, you can help bridge the gap between technology and users, ensuring that no one’s left behind.

For me, accessibility goes beyond fulfilling legal requirements or technical standards – it’s about creating equal opportunities for all users to engage with digital products. Whether you’re crafting microcopy, alt-text, or designing for screen readers, always try to put yourself in the shoes of those who use your product. That’s how you create truly inclusive digital experiences.

Stay tuned for more as we'll be deep diving into this topic soon, and sharing some best practices for creating an accessible user experience through writing. In the meantime, if you have any questions or want to discuss this topic further, feel free to reach out. 

For an in-depth look at inclusive design principles that complement accessible UX writing, check out our recent articles Introduction to Inclusive UX/UI Design and Implementing Inclusivity in UX/UI Design.