It's critical to implement accessibility the right way from the start. In these case studies, we can learn from how other companies have succeeded (or not) and how we can do it better ourselves.
According to authorized research, about 18% of the world’s population has a disability that inhibits access to digital content, with seniors making up about 50% of those people. [1] That 18% has to fight through digital interactions that can leave them frustrated and isolated. [2]
So these numbers tell us that there is a significant portion of the population that relies on accessibility. However, if that’s not enough to encourage your client, boss or project manager to abide by the rules of accessibility, let them know how great of an opportunity they’re missing.
Implementing accessibility increases traffic and improves search engine ranking. [1] Legal & General Group or L&G has witnessed it firsthand. In a matter of 24 hours after implementing some accessibility fixes based on an accessibility audit, they saw a 25% increase in traffic coming from search engines. It soon increased to 50%, and their conversion rate doubled within the first three months. In terms of ROI, the investment they made in their site’s accessibility resulted in 100% return on investment in only one year. [1] I was a digital marketer in the past, and I haven’t heard of anything as simple as this that could land such results.
Also, you don’t really have a choice. Especially if you’re big in your industry. Target learned its lesson the hard way: They only agreed to make their site accessible after having to pay roughly $10 million to settle a class lawsuit with the National Federation of the Blind. [3]
But web accessibility is not just about avoiding lawsuits or being inclusive – there is also a business case to be made out of it. The global market of people with disabilities is estimated to be worth $6 trillion. [4] So think twice if you consider accessibility to not be a priority.
A lot of us think that accessibility is rules and best practices to respect when designing and developing an interface. Well, like for mobile interfaces, the best results come when you think about accessibility from day one by including user personas that include people with disabilities.
A great example is CityMaas Assist. CityMaas Assist’s mission is to provide city travel information primarily to people with “varying abilities and disabilities” through features that are designed to answer the need of their target users. [2]
The design team started by collecting information on the different obstacles users usually encounter while traveling around the city. Their designers travelled a whole afternoon with their founder (who is wheelchair bound and unable to use his arms), using different types of transportation to understand the pain points he encounters and what features could help overcome them. [2]
With this information in hand, the designers were able to create a user persona to which they can relate to carry out the UX and UI design process. [2]
The essential features that came of this process were: [2]
In terms of design requirements, the team took the following considerations: [2]
Even though this is an app that was specifically designed for people with disabilities, it gives us an insight on how we can include specific user personas in our design thought and process since day one.
We could think that how we can accommodate people who have hearing impairments is quite straightforward, but there are some details that can make a difference and obstruct them from fully experiencing a product or a service.
For example, of course Netflix offers closed captioning, but it has to take into consideration not only closed captioning for dialogue but also for surrounding sounds. [5]
Another simple feature that makes a huge difference is the option on Apple products to use Mono Audio (playing both left and right audio channels through the one of your choice) or adjusting the audio balance in both ears. This allows people with hearing disabilities to not miss on a basic experience like listening to or even practicing music like anybody else. It’s simple but it’s no small feature. Remember how frustrating it was when one of your earphone’s earbuds wasn’t working? Well imagine having to deal with that for life! [6]
A study has reported that 30.4% of disabled people are just losing so much time when using a web platform. This could because there is no alternative text (ALT) for pictures, or, in some cases, the page design can cause the screen reader to give wrong feedback to the user, ending up causing the user to click on the wrong link. [7]
An interesting case I came across is the one of the BBC iPlayer. It shows that even when you have “all of the traditional ingredients [best practices and guidelines] of an accessible page in place,” it doesn’t mean that its accessibility is best optimized for a screen reader user. [8]
For example: [8]
So accessibility guidelines were respected in the development of the website, but accessibility wasn’t being truly considered during the design process. [8]
As Henny Swan (the author of this case study) puts it: “Part of the issue is that standards and guidelines tend to focus more on code than design, more on output than outcome, more on compliance than experience. As such, technically compliant pages could be built that are not the most usable for disabled users.” [8]
This was a great lesson for the BBC team that we can also learn from.
What they did next was to reconsider their whole design framework. Instead of basing their accessibility efforts on standards and guidelines, they used these standards to inform their newly conceptualized design framework from the inside out. [8]
This new design framework consisted of four UX principles: give users choice, put them in control, design with familiarity in mind, and prioritize features that add value. [8]
This translates into not assuming which way the user wants to access certain content or features, be it in terms of navigation or comprehension. [8]
It also means that the visual patterns and the language used must be familiar. Of course designers should not restrain their creativity, but they also need to keep a certain balance between the new and the old to not confuse users, because they rely on familiar design patterns to navigate pages and access features. The same goes for wording – consistent labeling should be used for headings, buttons, navigation links, and alternative text too. [8]
Finally, we should keep in mind that features we consider small for users without disabilities can have tremendous impact on a user’s experience who does have a disability. You may directly think of closed captions, but there are other features out there that have the same impact.
For example, adding a favorites page on the BBC iPlayer platform may seem like a “nice to have” for users without disabilities, but it made a huge difference for users with a disability. It was even the single most requested feature from that user group because it allowed them to access their favorite content without the usual hassle they had to get through every time. [8]
Taking one step further into what great features look like, let’s talk one second about Facebook’s automatic alternative text. [9]
It’s a great testimony of the potential contribution of artificial intelligence to accessibility.
Previously, screen reader users on social media only heard the word “photo” or “video” when they came across them on their newsfeed. [9]
It’s quite reducing (to say the least) as a social media experience, because that’s almost all we share all day long on social media.
But now, Facebook has implemented object recognition technology (a computer vision technique for identifying objects in images and videos), so people who use screen readers on an iOS device will hear, “Image may contain three people, smiling, outdoors.” [9] This allows them to join in in the conversation!
So far, we went through sensory and physical impairments, but the user experience can be as complicated for people with cognitive disabilities as it is for the other impairments.
Among the issues users with cognitive disabilities encounter are:
- Inability to remember passwords if the user has a short-term memory impairment [10]
- Not understanding instructions when unfamiliar or complicated language is used. This is common to people with language and communication related disabilities [10]
- Difficulty to focus on tasks when a page is full of distracting elements or interrupting popups / notifications [10]
Although I’ve come across a lot of best practices and guidelines to build accessible platforms for people with cognitive disabilities, I am actually a little disappointed because I wasn’t able to find a true example of designing accessibility from day one for cognitively disabled people.
If you come across an interesting case, share it with us in the comments.
However, I was able to find a study made by the Institute on Disabilities that showed what people with cognitive disabilities prioritized as top access guidelines: [11]
Lastly, I want again to go through some built-in features Apple provides, because they really do a great job building simple features that let users with impairments have almost a similar experience using their products as users without disabilities:
I think that we can all agree that developing true accessibility for users with disabilities is not only about following guidelines, it’s about relying on a design framework that empowers all users regardless of their condition.
This means that accessibility is also about letting users access features and content in any way that they see fit, keeping their options open.
Because, at the origin of it all, technology is about giving more control to people, not restricting them with our pre-made assumptions of what’s right for them and ignoring the other possible options they may prefer.
The good news is that technology is the gift that keeps on giving – to all of us if we use it right. It can bridge the divide between differing levels of instead of reinforcing that divide.
P.S. I didn’t mention per say neurological disabilities, because, when talking about sensory, physical and cognitive impairments and disabilities, we cover the implications of living with a neurological disability.
We have created a comprehensive whitepaper on accessibility for developers that covers everything from laws to coding to testing.
Download the whitepaper: Accessibility for Developers
One easy way to make sure that you are creating accessible web apps is to start with components from the Kendo UI libraries. Our components are all WCAG complaint and give you great functionality from grids and charts to schedulers and pickers. Get a head start on your app's UI and a head start on accessibility compliance at the same time.
Learn more about: Kendo UI
π[1] Make-Sense - Web Accessibility Benefits – Case Study
π[2] Jimmy Hay - CCity Aideβ—βA UX/UI Case Study.
π[3] Jonathon Hensley - The high cost of digital discrimination: why companies should care about web accessibility
π[4] W3C Web Accessibility Initiative (WAI) - The Business Case for Digital Accessibility
π[5] Adina Katz - Accessibility and Usability: A Case Study With Netflix
π[6] Apple - Technology is most powerful when it empowers everyone
π[7] Mohammed Saleh Hassouna, Noraidah Sahari & Amirah Ismail - University Website Accessibility for Totally Blind Users
π[8] Henny Swan - Accessibility Originates With UX: A BBC iPlayer Case Study
π[9] Facebook Newsroom - Using Artificial Intelligence to Help Blind People ‘See’ Facebook
π[10] W3C Web Accessibility Initiative (WAI) - Making Content Usable for People with Cognitive and Learning Disabilities
π[11] Mark G. Friedman and Diane Nelson Bryen - Web accessibility design recommendations for people with cognitive disabilities
Nada is a JavaScript developer who likes to play with UI components to create interfaces with great UX. She specializes in Vue/Nuxt, and loves sharing anything and everything that could help her fellow frontend web developers. Nada also dabbles in digital marketing, dance and Chinese. You can reach her on Twitter @RifkiNada or visit her website, nadarifki.com.