Mobile Accessibility Resources

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

Microsoft has an incredible toolkit that includes a manual, activities, and support cards and materials to print out and put around the office. These materials aim to shift your mindset away from “accessibility == disability” towards true universal design thinking.

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:

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

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

Gov.UK department of Home Office Digital have created some great open source posters that you can hang around the office, and they’ve been translated into around 10 languages. They provide a great introduction to designing for accessibility as well as common mistakes.

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

Vox Media, a digital media company whose most popular brand is The Verge, created an accessibility checklist for every role in the team; designer, developer, project managers, quality analysts, and content editors. They’ve created an easy checklist creation tool, where you can check the guidelines that apply to your project, and copy-paste those checkboxes into your favourite project management tool — e.g. Trello, or Jira

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)

Teach Access is an interactive web page that teaches you how to instantly improve the accessibility of your webpage through simple examples of semantic HTML code snippets, which you can see straight away while using the screen reader to navigate the tutorial. It was originally named “HIKE”, an accessibility primer created by Facebook, but was later renamed to the Teach Access Initiative. Must like Microsoft, Facebook also has a great accessibility toolkit.

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.

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

The next section includes resources for standards in mobile accessibility, in a similar fashion that WCAG 2.0 or WebAIM provides standards and guidelines for web accessibility. Mobile standards and guidelines are not as well-defined as smart phones and smart devices haven’t been around as long as the World Wide Web. To save you the search, here are the best resources I’ve found so far.

BBC Mobile Accessibility Guidelines

These are the best mobile accessibility guidelines I have found to date. They apply to web-based, hybrid, or native apps.

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

Deque University App

You can’t possibly mention accessibility without Deque. Deque is the leading automation and tooling company that creates amazing open-source software to make the web (and mobile) more accessible. The Deque University app is available on both iOS and Android, and teaches you the dos and don’ts of native mobile accessibility.

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

Apple have gone above and beyond to create the most human-friendly user experiences and accessible products. Apple’s built-in VoiceOver screen reader is almost as widely used as JAWS or NVDA, and screen reader users strongly prefer to use an iOS devices over Android, compared to people who don’t use a screen reader, based on a survey by WebAIM.

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

Material design is a set of mobile UI design principles and guidelines created by Google primarily for Android app development. Material design also outlines accessibility principles and practices.

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)

  • VoiceOver (iOS) — Settings > General > Accessibility > VoiceOver (I recommend you turn on the Accessibility Shortcut, so that you can turn your screen reader on and off by triple-clicking the Home button)
  • 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

Once you’ve worked out how to turn your mobile screen reader on (and, hopefully, off), it’s hard to remember all the gestures, especially if you’re not using it everyday. These cheat sheets are great to hang in the office as a quick reference to how to navigate your phone with a screen reader.

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

You can actually do preliminary debugging of you app, by turning on VoiceOver on your Mac and clicking into the 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.

A screen shot of the OSX VoiceOver introduction screen prompt.

TalkBack on your Android Emulator

This is great for testing your app without needing to put it on a physical device.

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.

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
The Google TalkBack tutorial is a great starting point for learning how to use a mobile screen reader.

Auditing/Inspection Tools

What you won’t find here are automatic testing tools. I’ll be adding a separate article on mobile UI testing frameworks at a later date. These are manual accessibility inspection tools that are still very useful.

Accessibility Inspector (OSX & iOS Simulator only)

If you’re developing an iPhone app, you can use the Accessibility Inspector to take a peak at how accessible your app is. The text under “Quicklook” in the inspector indicates what is spoken by the screen reader, and clicking the left/right arrows simulate screen reader navigation. It can be a bit buggy, so always check on your device with a screen reader, but it’s great for debugging during app development.

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

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)

You can download the Accessibility Scanner App onto your device. It will take a screen shot of your app, and suggest improvements. It also explains the principle behind each suggestion.

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!

Thanks for reading my first blog on developing inclusive software! I hope it was helpful. Stay tuned, more content coming very soon.

Go forth and make amazing apps!