How to Start Your Journey Into Mobile Accessibility?

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.

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.

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.

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.

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.