Editor's Note: This blog is a summary of our November 12 Webinar, "How a Blind Person uses a Website on Mobile versus Desktop." Watch the webinar in full here.
As our world becomes increasingly reliant on the internet, a norm accelerated by the global pandemic, a larger focus has been put on businesses to uphold the ADA in their digital presence.
While many businesses focus energy on keeping their websites accessible for desktop users, it’s important to remember that mobile sites and apps need to be accessible too.
A blind person will interact with your website or app on a mobile device differently than they will on a desktop computer. Understanding the difference in functionality can help you avoid common mistakes that prevent true accessibility.
Let’s take a look at how the experience differs from one device to another and what you can do to make sure your content is accessible on both.
Many modern websites are complex with frequent updates and code changes. A website may have many user paths, content behind gateways, or difficult forms to fill out on a screen reader.
Simply put, the more complicated your website, the more demanding it may be to maintain accessibility.
Why use WCAG for ADa compliance on Desktop & Mobile
A screen reader is an assistive technology used primarily by people with visual disabilities. Screen readers translate on-screen information into speech so the person using the screen reader can listen to the content displayed on a site.
The experience for a person with a visual disability is slightly differently on mobile vs. desktop, however, and it’s important that brands understand the difference when they’re structuring their content.
How a Blind Person uses a Website on Desktop
On desktop, a user who is blind may utilize their keyboard to navigate and explore elements or anchor points on the site. This includes linked in-text, navigation menus, clickable CTAs, and even forms.
The WCAG defines exactly how to ensure that these elements are labeled and organized to be meaningful, consistent, and functional.
How a Blind Person uses a Website on a Mobile Device
Keyboard navigation isn’t an option on mobile. Instead, people who are blind or have a visual disability will use a combination of gestures to explore a site and touch elements. When an element like a link or CTA button is touched, the screen reader will read the content of the link aloud. Double tapping selects the option that is read.
The applied WCAG can be used to assess the coding of different elements, along with the design and UX support.
One best practice is to test with user testers who are members of the disability community and active screen reader users. User testing with people who have disabilities allows you to ensure that you have accessible and well-designed mobile content.
The Most Popular Screen Readers
When you’re testing your desktop and mobile site, prioritize testing your main user journeys with the most popular mobile screen readers.
According to a 2019 survey of screen reader users by WebAim these are:
- VoiceOver
- TalkBack for Android
- Voice Assistant
- VoiceView
- Mobile Accessibility for Android
- Mobile Speak
- Nuance Talks
You’ll also went to test your site with the following popular desktop screen readers across multiple different browsers:
- JAWS
- NVDA
- VoiceOver
Inclusive Design for Mobile
Having a strong, fully-functional and fully-accessible desktop site is an great start for businesses when it comes to ensuring equal access to all potential and existing customers. It’s not enough, however, because your customers with visual disabilities may be relying on mobile almost as frequently as they’re using desktop.
When designing for native apps, UI and layout have as equal an impact on the experience for your end users with visual disabilities as ensuring the code follows accessibility best practices.
With mobile accessibility, it is as important to focus on the design of the interface for a user who will navigate via touch as it is to label elements for proper navigation with a screen reader.
Interested in seeing a demonstration of exactly how screen readers work on mobile and desktop sites? Watch the webinar in full here.
