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.
How to Start Your Journey Into Mobile Accessibility?
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
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
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
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
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
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.