Studies show that roughly 15% of the world’s population has some form of disability.That’s over one 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 that 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.
Colour 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 colours, which helped make our text more legible. We used the Material Design Colour Tool as a guide.
However, it’s important to use more than just colour 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 colour blindness may miss the colour 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 that it guided people through our webpage content in the order that we wanted.
Of course, not all sites operate the same way. Let’s say that 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 that your app or site plays well with others
To ensure that your app or site are as accessible as possible, make sure that 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 that 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".
