Mobile Accessibility Resources

Larene Lg
Larene Lg
Sep 20, 2017 · 7 min read

Here is a list of my favourite mobile accessibility resources, with a focus on native apps.

I’m an engineer/developer, so I’m (pragmatically) lazy — as such, I’ve only provided resources that are concise and easy to understand and instantly applicable. These are resources that I constantly refer to and use, and always share with my teams on new clients and projects. I hope you find these useful, and share these resources to raise awareness and inspire your team or company to create wonderful mobile apps with accessibility in mind.

You’ll find general accessibility resources from the top of the page, moving to more mobile-specific resources further down the page.

Note: this article is a companion to my talk on Creating Inclusive Apps with React Native presented at YOW! Connected, 2017.

You may have come here to learn about creating accessible UI components in React Native — the article you’re looking for is elsewhere.


General Accessibility Resources

Inclusive Design at Microsoft

This is required reading for all designers, developers, and anyone involved in creating inclusive products. Here’s some easy links to the Microsoft Inclusive Design toolkit:

Image for post
Image for post
Inclusive design at Microsoft: to empower every person on the planet to achieve more.

Gov.UK — Dos and Don’ts of Designing for Accessibility

Image for post
Image for post
Designing for accessibility posters, created by Karwai Pun, courtesy of gov.uk — follow this link for text version of the posters

Vox Media Accessibility Guidelines

Image for post
Image for post
A screenshot of the Accessibility Guidelines from Vox Media, showing a checklist of requirements starting with designers and colour contrast.

Teach Access Tutorial (web accessibility and screen reader)

It only teaches the keyboard commands for OSX’s VoiceOver, but you can also use NVDA on Windows to navigate the tutorial —though, you’ll need to learn the NVDA keyboard commands first.

Image for post
Image for post
Screenshot of the Teach Access website, showing an example of how to make images accessible on a web page using alt-tags.

Creating a Culture of Accessibility

To create accessible products, you need to find opportunities to spread accessibility knowledge and enthusiasm in a sustainable way throughout your company.

This is a fantastic blogpost I read earlier this year about activities and practices at Dropbox to strive towards their mission of making products easy for anyone to use. Raising awareness and building accessibility and inclusivity into your organisation is the best way to create products for everyone.


Standards for Mobile Accessibility

BBC Mobile Accessibility Guidelines

Image for post
Image for post
A screenshot of the BBC Mobile Accessibility Guidelines summary page, showing a list of best practices.

Deque University App

Image for post
Image for post
Screenshots of Deque University app (courtesy the Apple Store) which gives basic demonstrations of how to correctly implement accessibility features on native apps.

Design Guidelines for Mobile Accessibility

Apple Developer — Human Interface Guidelines

Image for post
Image for post
A screenshot of Apple’s Human Interface Guidelines for accessibility, which gives a brief introduction to Apple’s accessibility features followed by links to in-depth Apple accessibility resources.

Android Material Design Guidelines

Image for post
Image for post
Material design’s core accessibility principles — “Clear”, “Robust”, and “Specific”. Followed by a list of best practices and common mistakes.

Mobile Screen Readers

Turning your Screen Reader On (and Off again)

  • TalkBack (Android) — Settings > Accessibility > TalkBack (you can also turn on the Accessibility Shortcut, where you can turn TalkBack on or off holding both volume keys for 3 seconds)

Once you have your screen reader on, open one of the cheatsheets below to learn how to use it.

Screen Reader Cheatsheets

Image for post
Image for post
An image of some of the basic screen reader gestures — swipe left/right to navigate between items on the screen, and double tap to activate selected item.

VoiceOver on your iOS Simulator

To turn on VoiceOver, use command+F5 shortcut, or under Accessibility in System Preferences. Use control+option+left/right arrow keys to navigate, and control+option+spacebar to activate a selection. This is almost as good as testing with VoiceOver on the device.

Image for post
Image for post
A screen shot of the OSX VoiceOver introduction screen prompt.

TalkBack on your Android Emulator

TalkBack — you can download the TalkBack APK and drag-and-drop into your Android Emulator. If you’re new to mobile screen-readers, start with the tutorial! Mobile screen-reader gestures are largely the same between both Android and iOS.

Image for post
Image for post
Screenshot of Android Emulator (running Nexus_5X_API_26_x86). To turn on TalkBack first install the APK, then go to Apps > Settings > Accessibility > TalkBack > and toggle it to On
Image for post
Image for post
The Google TalkBack tutorial is a great starting point for learning how to use a mobile screen reader.

Auditing/Inspection Tools

Accessibility Inspector (OSX & iOS Simulator only)

Unfortunately, the audit functionality doesn’t work within the iOS simulator, so just stick with inspection.

Image for post
Image for post
A screen shot of the OSX Accessibility Inspector, inspecting an element in the iOS Settings app on the iPhone simulator.

Google Accessibility Scanner (Android only)

Image for post
Image for post
Google’s Accessibility Scanner plonks a big blue tick in the middle of your Android screen, and you can tap on it any time to have it audit the current screen of any open app.

That’s all for now, folks!

Go forth and make amazing apps!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store