While some brands are prioritizing diversity, equity, and inclusion in their messaging and marketing campaigns, an essential component of inclusivity may be missing: accessibility.
It's especially important to cater to people who are typically underserved in the digital world. For example, people who are blind or have low vision, are deaf or hard of hearing, are neurodivergent, or those who have motor impairments. These individuals often face barriers when an experience is not properly designed. Online journeys are often a convoluted experience for people, so brands need to ensure their apps and websites don’t add further complications.
Building accessible user experiences will soon become a regulatory requirement too. This year, European Union member states are adopting the European Accessibility Act into their laws. The expectation is that all products and online services will need to be accessible once the requirements come into force in 2025.
So where do you start on your accessibility journey? We’ve spoken with four brands about how they think about and build for accessibility and disability inclusiveness. Here’s what they’ve learned:
Procter & Gamble: Building accessibility with disabled employees
Advertising is powerful because it connects with people through storytelling. But what if someone misses key elements of that story? This question led consumer goods manufacturer Procter & Gamble (P&G) to incorporate audio description — a voice-over describing what’s happening — into its video ads.
“The introduction of audio description stems from my personal experiences,” explains Sam Latif, company accessibility leader at P&G, who is blind. “I was in a meeting when an advert for Flash played, but all I could hear was the song ‘Flash’ by Queen. What I didn’t realize was that a dog was singing that song because, without audio description, I couldn’t understand the humour of the advert.”
The P&G team worked with The Royal National Institute of Blind People to learn how audio description is done and integrated it into their adverts:
P&G didn’t stop there. In 2021, it launched the first audio described Superbowl advert. The brand also ran its first adaptive audio description trial in the U.K. This means applying audio description to TV ads that don’t have enough natural gaps in the dialogue to provide a description. And, most recently, it added audio description to its YouTube channel.
“We don’t yet have all the answers but are proud of the progress we have made,” says Latif. “Experiences like this have led to change, with audio description opening up our advertising to millions more people around the world.”
Just Eat Takeaway: Building accessibility with disabled customers
Just Eat Takeaway conducts research directly with people with disabilities, from customers who are blind or have low vision through to those with non-visible disabilities, such as dyslexia. Its goal: understand people’s first-hand experiences when using the delivery app and build inclusive products.
“Observing people with access needs using our app has been eye-opening and a strong facilitator of change and awareness across the organization,” says Naoil Sbai, a global research team lead at the company. “It helped us realize the impact that simple changes could make. And it made us rethink how people interact with our app.”
This motivated the research team to identify optimization opportunities with the Android accessibility scanner. The automated tool flagged key recommendations, such as increasing the size of touch targets; the tappable space around a navigation button.
Once this issue was known, it took them just a day to make the touch targets bigger. Something seemingly small — and a quick fix — can make a world of difference to customers, especially those with limited dexterity. And, as a bonus, this makes it easier for anyone to order their food quickly while on-the-go.
Below is an example of how the size of the touch targets increased:
L’Oréal: Building accessibility through design guidelines — and going even further
L'Oréal had accessibility front of mind when building its new website. “The first step towards accessibility is to understand the different types of disabilities and how they affect millions of people,” says François Cunche, the beauty company’s digital project director.
When L'Oréal learned how low vision and cognitive-impaired customers use the website, it set out to raise awareness within the company. The brand adopted the industry-standard Web Content Accessibility Guidelines (WCAG) to improve the website experience. And it partnered with an agency that specializes in this topic to help implement the guidelines across the business.
With the basic foundations in place, the product team took it one step further by layering on additional features. For example, L'Oréal now offers accessibility controls in the website navigation menu, so people can select certain settings based on their needs.
The first feature is high-contrast mode. This removes background images and allows people to view the site in a strong white-on-black contrast, making it easier to read and focus on the content:
The team also added an option to deactivate animations to reveal a static header image on the page instead. This can help people with vestibular disorders, for whom motion can cause dizziness, headaches, and nausea.
“After several tests and user surveys, all results are very positive and encourage us to go further,” continues Cunche. “With knowledge comes responsibility, and only then can we create a better digital experience — for everyone.”
Booking.com: Building accessibility through internal partnerships
Booking.com is a large and complex organization, with many teams working on different elements of the digital travel company’s app. As different people, code, and designs feed into the app, some features don’t always behave as they should.
For example, during testing, the accessibility team found that some navigational tabs were not working correctly with screen readers — software that reads visual information from the screen out loud. In some instances, the screen reader would read out the wrong tab. For example, someone wanting to navigate to the “Car rentals” section, could be accidentally directed to the “Taxis” page.
The accessibility team partnered with the design systems team to update the components — the building blocks within an app — so that accessibility features, such as support for screen readers, were built in from the start.
“If we use components that are accessible by default, we can innovate and be agile, without having to focus on getting it right all the time, every time,” explains Booking.com’s Engineering Manager and Accessibility Lead, Parham Doustdar. Doustdar has been blind since birth and is an expert at navigating websites and apps with screen readers, so this accessibility issue was very familiar to him.
However, this work didn’t completely solve the problem, because some legacy components did not reflect the changes. The team partnered with another group in their organization to update the technology so the accessibility changes could be adopted throughout the entire app. Now, as pages are built and updated, everyone working on the app automatically uses components that have accessibility built in.
“It doesn't matter how accessible your components are if no one is using them,” continues Doustdar. “You have to harness existing initiatives, where possible, and partner with other teams to increase adoption.”
Putting accessibility into practice
Here are some final tips to help you improve accessibility:
- Make accessibility a priority across the organization. Get buy-in from your leadership and proactively research where an experience may be excluding people.
- Co-design with disabled employees and customers who have accessibility needs. Disabled people are your experts. No one knows their experience better than them, so leverage their insights.
- Create accessible and disability inclusive marketing with Google's new accessible marketing playbook.
And, above all, know that people’s varied needs continue to change so you’re never finished creating more accessible user experiences. The most important thing is to start.
