Reach more users: 4 tips for designing accessible apps and websites

Studies show that roughly 15% of the world’s population has some form of disability. That’s over 1 billion people.

That means if you’re not creating experiences and products with accessibility in mind, you’re not reaching a huge chunk of the population. It’s definitely something I considered when the Google Primer team asked me to consult on the redesign of its app and website.

At first, I didn’t know where to start. There’s a wide range of disabilities to consider. After a bit of research, I discovered that most disabilities fall into four categories: visual, physical, aural, and cognitive. So I evaluated Primer’s app and website accessibility with each of these categories in mind.

I spent a lot of time digging into best practices and app and website accessibility guidelines. And, after months of hard work, the Primer team launched its redesigned app and website. Along the way, we learned four important lessons.

1. Create perceivable content

Your app or site most likely contains valuable content, such as product details, instructions, updates, and so forth. But this content is only useful to people if they actually know it exists.

Color contrast can have a huge effect on how perceivable your content is. For Primer’s app and site, we bumped up the contrast between background and foreground colors, which helped make our text more legible. We used the Material Design Color Tool as a guide.

However, it’s important to use more than just color to show information. Your content should be perceivable in multiple ways. In the previous paragraph, for example, the text that links to another webpage is highlighted in blue, but it’s also underlined. Someone with color blindness may miss the color signal but will still notice the underline.

2. Offer several ways to navigate

Different people will interact with your app or site in different ways. For example, people with physical disabilities may navigate sites using only keyboard commands, like the tab key or space bar. So we created a mock-up of how someone might move through the Primer site using only keyboard commands, and we made sure it guided people through our webpage content in the order we wanted.

Of course, not all sites operate the same way. Let’s say you have a news site. It might be a bit much to ask people to tab through all of your articles and sections just to get to a restaurant review. So you could consider giving users alternative ways to move through information quickly, allowing them to access what they want more easily.

3. Make sure your app or site plays well with others

To ensure your app or site are as accessible as possible, make sure your site works with multiple browsers and that both your app and site support a variety of assistive technologies, like screen readers.

For example, it’s a good idea to add “alt text” to all of your images, as the Primer team did. This descriptive copy, written into the back end of an app or site, enables screen reader technology to help users who are visually impaired better understand images.

You can also label anything interactive, such as text input fields and icons. If your site has a navigation icon, you might give it a label for screen readers to use, such as “show/hide navigation menu.”

Remember, when you’re creating labels, be brief and use lots of verbs. That way, people using assistive tools won’t have to listen to long descriptions and can instead focus on what action they need to take.

4. Test, test, test

As you’re making accessibility refinements and updates to your app or site, you can use various tools to test the experience and determine how to further improve accessibility.

There are web extensions you can use to get a report on your site. For example, Google Chrome’s Lighthouse can run about 30 accessibility tests. If there’s a failure, you’ll be directed to a document with suggestions for fixing the issue. For mobile, you can try the Accessibility Scanner app. Tools won’t catch everything, however, so it’s smart to watch actual people using your app or site.

Don’t wait until the end of the creation process to conduct tests. Doing them every step of the way might save you from going too far down a path that won’t work for some users.

Perceivable content, navigation, clarity, testing, and designing for multiple browsers and assistive tools are essential parts of a more accessible experience — one that can help you engage more users and convert more customers.

Learn how to build more accessible site and app designs. Download the free Primer app and search for “accessibility.”