Exploring Screen Readers as a UX Designer
This is an how-to guide from a UXer’s first exploration into the world of screen readers.
I originally created this documentation while working at Backbase. Our company had recently announced new accessibility goals, one of which was making all of our products functional for screen reading technologies. Our engineering teams were primarily responsible for making this happen — but it was brought to my attention by a business analyst that in order to deliver a high quality outcome, engineers on our team needed help from a user experience perspective. I started researching how to make this happen, and then published this how-to guide to help future teams.
💭 Why is this important?
As Backbase grows its platform across the globe, it’s becoming more and more important we continue to focus on accessibility (often abbreviated to A11y — as in “a” then 11 characters then “y”) and ensure we design for everyone. Fundamental aspects of experience design are empathy and inclusivity, and our role as designers is to advocate for all our users and ensure our products provide them the ability to complete their day-to-day tasks, easily and intuitively.
-Ted Grajeda’s Accessibility Design Principles
When it comes to screen reading in our organization, the engineering teams are handling the majority of the work, but implementation is somewhat automatic (drawing directly from code). This can lead to unfortunate outcomes — think of hearing, “unlabeled graphic, button payment button, unlabeled graphic, button details button, unlabeled graphic, button transactions button” as you try to navigate your account page. As designers, it’s our responsibility to ensure a functional user experience for all.
🗣 Understanding screen readers
Before we can propose solutions, we need to understand the problem. Let’s take a journey to understand the basic principles of screen reading.
How interacting with a screen reader works:
First, see how a blind user navigates a web page.
Next, watch how a user navigates a web page using JAWS, and a mobile page using VoiceOver/iOS. ✨Don’t forget to enjoy a little iPhone 4s throwback! ✨
Finally, check out what the experience is like if no designer or accessibility expert is present to do a quality check (video should start at 2:13)
Differences between platforms and tools
At this point, you may notice there is more than one type of screen reader tool on the market. Differences occur between devices (mobile vs web) and platforms (iOS vs Android/mac vs Windows). Each have slightly different implementation patterns. The Accessibility Developer Guide has easy to understand documentation on this topic.
As designers, we should define what message needs to be communicated, and then collaborate with developers to implement correctly per platform.
🖥️ Common Web screen-readers:
- JAWS (job access with speech) One of the most commonly used tools
- NVDA (non visual desktop access) A popular open source tool
- VoiceOver/macOS — The same system as for iOS, but not as commonly adopted
📱Common Mobile screen-readers:
Instructions: How to Document the Screen Reader User Experience
The clearest instructions found during this exploration were created by the BBC. They have a handy PDF that walks you through step-by-step. The linked web page shows visual examples of how to complete each step. Highly recommend following their procedure — the outcome was a great tool to use with developers during handoff.
How-to Screen Reader UX PDF by BBC — https://bbc.github.io/accessibility-news-and-you/guides/screen-reader-ux.html
👩💻 Real Example from Retail Mobile
By following the resources shared above, I broke down the screen content in a Figma file. Developers from Android and iOS squads building the feature joined a meeting with me to review the outcome. We also invited the company’s resident accessibilty expert. Together we refined labels and variables, and agreed upon the Landmarks (black zones that become content blocks a user can easily discover through tapping on the screen or listening to an overview.)
💡Final Thoughts
- Read out loud as you design!
- Have you added or cut a significant amount of content for the screen reader? Consider if you should do the same for visual users.
- Developers can help you define the HTML/Semantic roles.
- All phones are equipped with this tech! Try it out for yourself sometime.
📚 Continue Learning
- How to label images and graphics? https://www.w3.org/WAI/tutorials/images/informative/
- Looking for iOS label examples? https://mobilea11y.com/blog/writing-great-labels/
