Introduction

Most people will experience a temporary or permanent disability at some time in their life that makes it difficult to use their mobile device. This may include someone who was born blind, someone who lost fine motor skills due to an accident, or someone who can’t use both hands while carrying a wiggly child. You may have experienced difficulties using your phone while wearing gloves when it’s cold outside. Maybe you’ve had a hard time distinguishing items on the screen when it’s bright outside.

With so much of the population experiencing reduced vision, hearing, mobility, or cognitive function—sometimes permanently, sometimes only in the moment—it’s important to design apps that work well for everyone.

But how do you ensure that your apps are truly accessible? You may have picked up some accessibility concepts while working with the classic View system, but Jetpack Compose is a whole new world. In this three-part series, you’ll learn the Jetpack Compose features you need to build accessible Android apps with confidence. In Part One, you’ll learn :

• Which core modifiers improve accessibility with minimal effort
• How to use accessibility tools to inspect and verify your UI

Just as you’d want your coffee to be within reach when you’re pinned to the couch by a sleeping kitten, you want your apps to be accessible when your users need them most.

Note: This article assumes that you know the basics of Jetpack Compose. If you need to learn or brush up on that, check out Jetpack Compose Tutorial for Android: Getting Started.

Getting Started

Alright, let’s get started! In this series, we’ll be using an app, Cat Napper, to walk through some examples. This is an app to keep track of your cats’ nap times and to observe trends or differences. Sounds purrfect, right? Unfortunately, the app only supports viewing. Editing and adding data is only supported in the iOS version. Typical, right? Thankfully, that’s plenty for our learning purposes.

Download the sample project and open it in Android Studio. Once it finishes building, run the app on a device. You can use an emulator, but you’ll find it’s easier to use the accessibility tools on a physical device if you have the option.

Right now, it’s a pretty bare-bones app, but you’ll improve that along the way while you’re learning. When the app opens, you’ll see a list of cats. When you tap on one of them, it takes you to a detail screen.

You’ll be making changes to both of these screens, so keep them handy.

• HomeScreen.kt has the list of cats. It uses LazyColumn to display Material cards containing each cat’s photo and name.
• DetailScreen.kt, as you might expect, has components showing all the information about that particular cat.

Now that you have the app up and running, and have a basic understanding of how it works, you can start looking for ways to build it accessibly.