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:
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.
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
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.
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.
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.
- Download Deque University on the App Store and Github
- Download Deque University on Google Play and Github
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.
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.
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.
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.
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.
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.
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.
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!
