How to Start Your Journey Into Mobile Accessibility?

Rate this content
Bookmark
Slides

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.

Alessandro Senese
Alessandro Senese
24 min
05 Dec, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

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.

Available in Español

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.

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

Accessibility at Discord
React Advanced Conference 2021React Advanced Conference 2021
22 min
Accessibility at Discord
Configuring Axe Accessibility Tests
TestJS Summit 2021TestJS Summit 2021
30 min
Configuring Axe Accessibility Tests
Top Content
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.
Limitless App Development with Expo and React Native
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!
How to Share Code between React Web App and React Native Mobile App in Monorepo
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.
Dialog Dilemmas and Modal Mischief: A Deep Dive Into Pop-Ups
JSNation 2023JSNation 2023
10 min
Dialog Dilemmas and Modal Mischief: A Deep Dive Into Pop-Ups
Our design systems commonly feature components that show on top of other content: tooltips, date pickers, menus and teaching UI, to name just a few. Proposed updates to the web platform are about to make building these a whole lot easier. You might not even need JavaScript. In this talk, you’ll learn all about the upcoming ‘popover’ attribute, modality and the top layer.
a11y and TDD: A Perfect Match
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?

Workshops on related topic

Web Accessibility for Ninjas: A Practical Approach for Creating Accessible Web Applications
React Summit 2023React Summit 2023
109 min
Web Accessibility for Ninjas: A Practical Approach for Creating Accessible Web Applications
Workshop
Asaf Shochet Avida
Eitan Noy
2 authors
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!
Automated accessibility testing with jest-axe and Lighthouse CI
TestJS Summit 2021TestJS Summit 2021
85 min
Automated accessibility testing with jest-axe and Lighthouse CI
Workshop
Bonnie Schulkin
Bonnie Schulkin
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.
Bringing Your Web App to Native With Capacitor
JSNation 2023JSNation 2023
111 min
Bringing Your Web App to Native With Capacitor
WorkshopFree
Mike Hartington
Mike Hartington
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
Hands-On With SwiftUI, GraphQL, & Neo4j AuraDB
GraphQL Galaxy 2022GraphQL Galaxy 2022
156 min
Hands-On With SwiftUI, GraphQL, & Neo4j AuraDB
WorkshopFree
William Lyon
William Lyon
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.
Web Accessibility in JavaScript Apps
React Summit 2022React Summit 2022
161 min
Web Accessibility in JavaScript Apps
Workshop
Sandrina Pereira
Sandrina Pereira
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 ;)
Bringing your React Web App to native with Capacitor
React Summit 2022React Summit 2022
92 min
Bringing your React Web App to native with Capacitor
WorkshopFree
Mike Hartington
Mike Hartington
So, you have a killer React 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!
This workshop is aimed at intermediate developers that have an existing React application, or are interested in mobile development with React. We will go over:
What is CapacitorHow does it compare to other cross-platform solutionsUsing Capacitor to build a native application using your existing web codeTidying up our application for distribution on mobile app stores with naming conventions, icons, splashscreens and more.