How to Start Your Journey Into Mobile Accessibility?

Rate this content

We want to learn about mobile accessibility to build an accessible mobile app, but where do we start? What does making an app accessible mean? What should we developers do? We will answer that by deep diving into the fundamentals of accessibility and assistive technologies.

24 min
05 Dec, 2022

AI Generated Video Summary

This talk explores mobile accessibility, including the different types of disabilities and how they affect app usage. It emphasizes the importance of making apps usable for as many people as possible and highlights the challenges faced by individuals with visual impairments. The talk also covers the principles of mobile accessibility, such as scaling the font size, supporting dark mode, and ensuring readable text. External tools and resources, like the Accessibility Inspector and Accessibility Scanner, are recommended for analyzing app accessibility. Various platforms and communities, such as Mobile Ally, Twitter, and React Native AMA, provide valuable resources for learning about mobile accessibility.

1. Introduction to Mobile Accessibility

Short description:

In this talk, we'll explore mobile accessibility, including what it is, different types of disabilities, and how they can affect app usage. We'll also discuss the importance of making apps usable for as many people as possible, as well as the different categories of disabilities and their specific needs. Additionally, we'll touch on the challenges faced by individuals with visual impairments, such as color blindness.

Hi, in this talk, we're gonna see how to get started with mobile accessibility. We're gonna see what is accessibility, the different types of disabilities, assistive technologies, accessibility tools, and some resources. Before starting, I'm Alessandro Senese, I'm a software engineer at Formidable. I started my journey in mobile accessibility about three years ago. In this slide, I'm gonna share what I learned so far and what, give you some resources to use to get started.

Okay, before starting, let's make one thing clear. Accessibility doesn't mean only making your app working with a screen reader. There is much more. So, what is accessibility? Accessibility is the practice of making your mobile app usable by as many people as possible. So our goal is we want our app to be usable by as many people as possible. To do that, we need to also look what is disability and how this can prevent people from using the app. So disability is part of human beings. This means that everybody is different and we have different skills and different ways to access our surrounding area and a mobile app. Almost everyone will temporarily or permanently experience disability at some point in their life. So here we can see that everybody will have some kind of disability at some point in their life that can be temporary like for example broken arm or broken leg or also situational where you're holding something in your hand so you are less able to perform some movements. Also we can see that over 1 million people about 15% of the global population has some form of disability. Here we can see some numbers by countries. So we can see that actually a lot of people might have some kind of disability that could prevent them from using a bar up. That's why we need to understand what these disabilities are. Here are some other numbers found online. Here is specific for Netherlands and how Dutch people use accessibility technologies on the website on the mobile app. Here is the Spectrum Persona from Microsoft. Here we can see different kinds of disabilities, and in different situations like permanent, temporary or situational. Disabilities, we can categorize disabilities in 5 big categories. Vision, hearing, mobility, cognitive and speech. Here in this different categories people will have different needs and different ways to access a mobile app. A visual impairment is when a person has a loss of sight that cannot be corrected using glasses or contact lenses. So besides total blindness, there are also categories also like color blindness, central field loss or peripheral field loss. For example, for color blindness, people can struggle to see some colors. That's why maybe it's a bad idea using only colors to give information on mobile app.

2. Understanding Accessibility and Disabilities

Short description:

Using labels with colors can be a bad experience for users with visual impairments. Providing subtitles or transcriptions for videos can help those with hearing impairments. People with mobility impairments may use screen readers, voice assistants, or assistive technologies. Understanding that disability is a spectrum and that people may have multiple disabilities is crucial. Accessible technologies include keyboards, switches, braille readers, voice control, and screen readers. Android and iOS offer additional accessibility settings, such as changing text size.

And using a label with colors can be a bad experience for this kind of users. Or for the other two examples, they might be using a magnifier on the accessibility setting, or they might need to use a bigger text. So you need to make sure that your app is rendered correctly while using bigger fonts.

Hearing impairment is when a person has partial or total inability to hear. So for example, hard of hearing or deafness. In this case, if we have a video, a good idea would be to provide subtitles or a transcription so that these people can actually read what's going on.

Mobility impairment people that are affected by movement, and for example, tremor, lack of coordination, paralysis, zaputation and others. This kind of person might be using other screen readers or might be using a voice assistant or for example a switch or other assistive technologies. For cognitive impairment when a person has trouble remembering, learning new things, concentrating or making a decision that affects their everyday life. People with ADHD, Autism, Anxiety, Delirium, Dyslexia. For example, some people might have Aplasia so if you have an image that flashes too much it can cause problems for them, for dyslexia people the font use and the way you use the font can make the experience with the app very bad. Another example can be if you have an input field and you don't have any label, people might struggle to remember what the field was for so you force them to delete what they entered to see the hint and re-enter the information again, or some people might be affected by movements of the animation. So a good idea might be also disable the animation if the user asks that, and so on.

Another thing we need to understand that disability is a spectrum not a binary. In this case that person was shared on social media and people were saying that she is a fake blind. The problem is that they struggle to understand that she has some kind of low vision that still allows her to use the mobile phone. So yeah, disability doesn't mean that you are completely disabled or you are not disabled. You can have some degrees of disability in any of the five categories we have seen. Also another thing we need to understand is that people might have multiple disabilities. So yeah, understanding disability is the first step in building accessible services. In our case we want to build an accessible app so we really need to understand the needs of these five categories and provide solutions for these people. So when we talk about accessible technologies, we talk about keyboards, switches, braille, reader, voice control, or screen reader. Some users might be using a keyboard, like a Xen keyboard, like with mobile phones, either iOS or Android. A screen reader, basically it is used to announce the element of the screen. A switch, users use one button control to access and to trigger elements on the screen. A braille reader or voice control if you want to control the phone by just using your voice. Usually if you take care of a keyboard screen reader user, the other three categories should already work without much effort. Other things provided by the mobile phones, like assistive technologies are like an external software or external device the user can use on your mobile. But both Android and iOS provide additional accessibility settings like they are in general. Like for example the user can choose to change the text size on the mobile phone.

3. Mobile Accessibility and Principles

Short description:

The app should scale the base font size according to motion. Disable animation if it causes motion sickness. Support dark mode for users who find reading on white screens sensitive. Follow the accessible principles of Perceivable, Operable, Understandable, and Robust. Prevent content that can cause seizures. Ensure text is readable and understandable. Have consistent behavior and appearance. Use linting tools to identify accessibility issues.

So the app should make sure that whatever base font size you choose is gonna get scaled according to that motion. As I said, some people can get nausea from motion or motion sickness, so they might decide to just disable the animation on the device. And so, if you have animation on your app , you should not animate any transition, you can still use opacity, is more the transition of any movement, cause probably two users, so you should not use any movements in your app.

Another setting, color inversion, high contrast, bold text, and dark mode. So yes, your app should also support dark mode, because some people might find too sensitive reading text on the white screen, so ideally you should also consider supporting dark mode for your app.

Another thing we need to take in consideration are accessible principles, or POR, and these are fundamental principles by the W3 organization, and it's an acronym where P stands for Perceivable, O for Operable, U for Understandable, and R for Robust. Operable means that the interface information, user interface components, must be presentable to the user in a way that they can perceive. In case, for example, yeah, text for non-text content, caption for videos, and the content, yeah, it needs to be easy to see and hear. For example, using the user interface components and navigation must be operable. So, user should be able to operate whatever content via external keyboard or screen reader. Also, user should give enough time to read, use the content to a user. For example, if any content disappears after a certain time, you should consider to extend the time. If the user is using screen reader, or on Android there is a setting called time-to-take-action. You should use that time, or instead whatever time you decide, to let user be able to interact with the content, as some expiration time. Content does not cause any seizure on physical reaction. As we said before, if you have flashing images that can cause problems to people with epilepsy, you should prevent this type of content.

Another principle is understandable. Information and the operation of user interface must be understandable. Text is readable and understandable, content appears and operates in unpredictable ways, users are helped out and correct mistakes. This, for example, applies to people with cognitive impairments. where if you use too many jargons or text to understand, you exclude this kind of people. Also, yeah, a good idea is to have a consistent behavior across the hub and across all components, they look the same. Robust content must be robust enough that it can be interpreted by a wide variety of a user agent, including assistive technologies. Yeah, this is like in this example, you need to give a name, a role or accessibility hint to a component.

OK, now you see we had an overview of what AccuSybit is and some principles. What we can do is, there is quite a lot to learn and to take in. So what we can do like straight away to get started is we can use some linting. For example, for react-nativity, there is a plugin for Formidable. It's called the ES-Plugin React-Native Accessibility A11i. This linter will highlight at least the most basic issues like missing accessibility role or missing accessibility label on your components.

4. External Tools and Resources

Short description:

You can use external tools like the Accessibility Inspector on iOS and the Accessibility Scanner on Android to analyze your app for accessibility issues. These tools are not perfect and may only catch about 40% of issues, but they are a good starting point. Additionally, you can find resources, guidelines, articles, and communities on Twitter to learn more about accessibility.

Also, you can use external tools. For example, on iOS you can use the Accessibility Inspector or on Android you can use the Accessibility Scanner. There are also other external tools. Basically, those are external to your app. You need to run them manually.

For example, on Android, Accessibility Scanner will analyze your app, and the web apps used on your app, it will tell you which missing label, or missing role for components, or also highlight if the contrast is not enough.

The other thing to understand is that these other linting testing tools are not perfect. They will only catch about 40% of accessibility issues, but it's still good enough to get started while we practice and learn more about accessibility.

For the resources, we can look at guidelines, articles, we can follow people, or look for communities or books. This is one of the activities people can follow on Twitter. He is doing currently a 365 activity where he everyday tweets about accessibility, accessibility thing and how to solve the problem. His tweet and book, also you can use his book, are for iOS only. But probably most of the patterns also do apply on Android. So it is still a good resource.

5. Resources for Mobile Accessibility

Short description:

Mobile Ally and accessible mobile apps are great resources for learning about mobile accessibility. Twitter communities like Mobile Accessibility and Access MonoByte provide platforms for asking questions and accessing helpful resources. React Native AMA and Network Nativama offer libraries and guidelines for building accessible apps. The BBC platform provides resources for app accessibility, including React Native. Ebooks for developing accessible apps can also be useful, especially when working with React Native. Remember, accessibility is an ongoing process, and starting with basic accessibility measures is a good first step.

Another group of people on Twitter is Mobile Ally. They share a lot of resources, a lot of mobile-specific. Another good resource is accessible mobile apps. They also have a mailing list, where every week they do share articles on any kind of resources for both Android and iOS. Most of the time are native things, but we can still use them, because we want to learn how accessibility works, regardless of the underlying technology we want to use. We want to really understand how to make the app accessible.

Also, a good community is on Twitter, there's a community called... yeah they have this new feature for communities. It's a mobile accessibility where you can actually ask questions. If you have any doubt about accessibility, you can ask a question and someone will definitely reply to your answer in the best way people can. And Access MonoByte also have a Slack channel with resources and people who are happy to help with any query.

Other resources, more mobile focus, one is React Native AMA. React Native AMA is a library that we are building that will try to help you build an accessible app. You will have some components and some hooks that help you with the purpose. Meaning that some components, a hook they are able to do some checks in real time. So can tell you if there is a missing label, a missing accessible role or the contrast is not enough. Also there are components like forms that already help the user to navigate using the keyboard and the next key to focus the next field.

Another good resource is Network Nativama, which also provides guidelines for each component we implemented. We also tell you how it's supposed to work in an accessible way, and what you should be looking for when you implement some feature. Another good resource is the BBC. There is this one platform for app accessibility. This resource is kinda new, and they also offer resources for React Native, apart from Flutter and other Native stuff. Another thing we can use are the actual ebooks for developing accessible apps for Native, Android, and iOS. The reason is we might not be able to actually sometimes use some accessibility APIs, because they are not available in React Native yet. But mainly what we are looking for are patterns. We really want to understand how accessibility should work. And maybe try to implement these in React Native as much as possible.

The last thing I want to say is, yes, accessibility is a nice task. It will take you probably time, a long time. But also, it doesn't mean that it needs to be perfect. You can start right now. Just use a linked in tool or some accessibility tool and add some basic accessibility. Make sure that the basics are covered. And also, as long as you learn more stuff, you can make your app better and better and better. That's all from my talk. I hope I gave you enough resources, information to get started. If you have any questions, you can contact me on social media. I would be very happy to help you in any possible way.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

TestJS Summit 2021TestJS Summit 2021
30 min
Configuring Axe Accessibility Tests
Axe-core is a popular accessibility testing engine that is used Google, Microsoft, and hundreds of other companies to ensure that their websites are accessible. Axe-core can even integrate into many popular testing frameworks, tools, and IDEs. In this advanced session, we'll be learning how to configure axe and its integrations to fine tune how it runs and checks your pages and code for accessibility violations.
React Advanced Conference 2021React Advanced Conference 2021
27 min
Limitless App Development with Expo and React Native
App development is hard, React and Expo make it easy!It's never been simpler to build and deploy powerful mobile apps with incredible features to both Android and iOS users all over the world.We’ll discuss building and deploying mobile apps seamlessly from the cloud using EAS, creating powerful dev clients (like browsers but for mobile app development) for testing your app, pushing OTA updates instantly to users, and much more — no native experience required!
React Summit 2022React Summit 2022
7 min
How to Share Code between React Web App and React Native Mobile App in Monorepo
Usually creating web and mobile apps require different tech stacks, and it is pretty hard to share code. This talk will show how I added a React web app and a React Native mobile app in the same monorepo using Nx, and how I optimized codeshare between react web app and react native mobile app.
JSNation 2022JSNation 2022
24 min
a11y and TDD: A Perfect Match
Accessibility has been web development's ugly duckling for quite some time now. I often get asked, "when should you test for a11y in your apps?" My answer is simple, "right from the start!". Regardless of the framework considered - React, Svelte, Vue, YourOwn™️ - as developers we are in a privileged position to help the ugly duckling grow into a beautiful swan. How? By diving deep into the pond and harnessing the power of Javascript APIs to build the right components for your web apps. And how can do you know you are building them right? By pairing Test Driven Development with the Testing Library family. Ready to grow your web apps into swans?
React Summit Remote Edition 2021React Summit Remote Edition 2021
35 min
Building a Mobile App with Expo, EAS, and React Native
It has never been easier for React developers to build native iOS and Android apps. In this talk, we'll see how quickly you can ship your app with Expo open source tools, Expo Application Services (EAS), and React Native. We'll also discuss some of the recent improvements we've made and what's coming up next.

Workshops on related topic

React Summit 2023React Summit 2023
109 min
Web Accessibility for Ninjas: A Practical Approach for Creating Accessible Web Applications
In this hands-on workshop, we’ll equip you with the tools and techniques you need to create accessible web applications. We’ll explore the principles of inclusive design and learn how to test our websites using assistive technology to ensure that they work for everyone.
We’ll cover topics such as semantic markup, ARIA roles, accessible forms, and navigation, and then dive into coding exercises where you’ll get to apply what you’ve learned. We’ll use automated testing tools to validate our work and ensure that we meet accessibility standards.
By the end of this workshop, you’ll be equipped with the knowledge and skills to create accessible websites that work for everyone, and you’ll have hands-on experience using the latest techniques and tools for inclusive design and testing. Join us for this awesome coding workshop and become a ninja in web accessibility and inclusive design!
TestJS Summit 2021TestJS Summit 2021
85 min
Automated accessibility testing with jest-axe and Lighthouse CI
Do your automated tests include a11y checks? This workshop will cover how to get started with jest-axe to detect code-based accessibility violations, and Lighthouse CI to validate the accessibility of fully rendered pages. No amount of automated tests can replace manual accessibility testing, but these checks will make sure that your manual testers aren't doing more work than they need to.
GraphQL Galaxy 2022GraphQL Galaxy 2022
156 min
Hands-On With SwiftUI, GraphQL, & Neo4j AuraDB
Bring the power of graphs to iOS mobile app development in this hands-on workshop. We will explore how to use the Neo4j GraphQL Library to build GraphQL APIs backed by Neo4j AuraDB and how to integrate GraphQL into an iOS app using SwiftUI and the Apollo iOS GraphQL library as we build a news reader mobile app.
Table of contents:- Intro to Neo4j AuraDB- Building GraphQL APIs with the Neo4j GraphQL Library- Intro to SwiftUI- SwiftUI + GraphQL
PrerequisitesTo follow along during the workshop attendees will need a Mac laptop with a recent version of Xcode installed. Some familiarity with Swift and iOS app development will be helpful, although not required.
JSNation 2023JSNation 2023
111 min
Bringing Your Web App to Native With Capacitor
So, you have a killer web app you've built and want to take it from your web browser to the App Store. Sure, there are a lot of options here, but most will require you to maintain separate apps for each platform. You want your codebase to be as close as possible across Web, Android, and iOS. Thankfully, with Capacitor, you can take your existing web app and quickly create native iOS and Android apps for distribution on your favorite App Store!
Contents: This workshop is aimed at beginner developers that have an existing web application, or are interested in mobile development. We will go over:- What is Capacitor- How does it compare to other cross-platform solutions- Using Capacitor to build a native application using your existing web code- Tidying up our application for distribution on mobile app stores with naming conventions, icons, splash screens and more
React Summit 2022React Summit 2022
161 min
Web Accessibility in JavaScript Apps
Often we see JavaScript damaging the accessibility of a website. In this workshop, you’ll learn how to avoid common mistakes and how to use JS in your favor to actually enhance the accessibility of your web apps!
In this workshop we’ll explore multiple real-world examples with accessibility no-nos, and you'll learn how to make them work for people using a mouse or a keyboard. You’ll also learn how screen readers are used, and I'll show you that there's no reason to be afraid of using one!
Join me and let me show you how accessibility doesn't limit your solutions or skills. On the contrary, it will make them more inclusive!
By the end, you will:- Understand WCAG principles and how they're organized- Know common cases where JavaScript is essential to accessibility- Create inclusive links, buttons and toggleble elements- Use live regions for errors and loading states- Integrate accessibility into your team workflow right away- Realize that creating accessible websites isn’t as hard as it sounds ;)