Screen Reader 101: Avoiding UI Failure

Using a screen reader to create better interactions

By: Jackie Tidwell and Andrea Fowler

“I hate it when you don’t add a period. It makes the fields run together,” a reader who is blind said while testing our UI at an accessibility review.

We run accessibility reviews, sometimes with screen readers, to make sure our products are usable for all customers. Screen readers are an assistive technology used primarily by people who are blind. As you may guess, screen readers read out loud the text on the screen, but they also give contextual clues about every element in the UI and the actions available. In doing so, they empower people who are blind or have low vision to use technology with the same amount of independence as anyone else.

People who use screen readers represent a small segment of the population, but there’s so much potential to reach even more people with screen reader text. According to The World Health Organization, about 1.3 billion people live with some form of vision impairment, and 36 million are blind. There’s not only a market for it, but also why wouldn’t you create an app that can be used by everyone? Not only are we capable of it, but it’s also our responsibility. In the words of our CEO, Satya Nadella, “It’s the right thing to do.”

Test a screen reader yourself

Many writers, developers, and designers admit to never having opened a screen reader or tried navigating an app using only their keyboard. That’s a missed opportunity. Our job is to create an interface and experience that works for everyone, not just most customers. And using a screen reader yourself is the only way to truly understand our customers’ pain points and frustrations.

Give the screen reader on your device a try. Pro tip: Read through all the instructions first. And if you’re using a desktop computer, use your keyboard to navigate the screens. On mobile devices, you’ll navigate through touch.

• If you’re using a Windows device, select Start and then type “Narrator.” Narrator includes a first-run walkthrough to help you along.
• On an Apple device, you can turn on the VoiceOver screen reader in Settings under General > Accessibility.
• To try Android’s TalkBack screen reader, go to Settings and select Accessibility > Talkback.

Put your screen reader through its paces. Think of a simple task, like reading a text message, then turn off your monitor or hide your phone screen. Try the task using only screen reader direction. You might find that the screen reader experience is less intuitive and more frustrating than you expect.

Designing for customers who use a screen reader

You did it! You successfully opened a screen reader, and you even used it a little. Now, test the interaction on every device and with as many screen readers as you can — each screen reader has a slightly different way of navigating. Consider checking out NVDA (which is free) and JAWS (which requires a paid license). Note: NVDA and JAWS are both Microsoft partners.

Whether your product team includes dedicated writers or not, you are not only responsible for the words on the screen you can see, but also for the words you can’t see — screen reader text. As a UI writer, developer, or designer, you affect what the screen reader says out loud. What you write should complement what’s on the screen and avoid repetition unless it’s confirming an action. Screen reader text should communicate the meaning that is visible on the screen and how you interact with each element. If you can’t get things done in your app with a screen reader, neither can your customers.

We’d love to share more work with you. Ask questions and tell us what you think, and we’ll keep the conversation going.

To stay in-the-know with Microsoft Design, follow us on Dribbble, Twitter and Facebook, or join our Windows Insider program. And if you are interested in joining our team, head over to aka.ms/DesignCareers.