Accessibility Case Studies

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.

📢 The Case for Accessibility

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.

Mobility Impairments ✋ Case Study

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]

1. The ability to plan one’s journey from a to z, including the information that must be known regarding his needs
2. Book and pay for all his tickets in advance from one app
3. Checking the availability of wheelchair access throughout the whole journey
4. Calling for assistance from any point on the app

In terms of design requirements, the team took the following considerations: [2]

1. Choosing “FS Me,” a typeface specifically designed to improve legibility.
2. Going for a color palette that consisted of a strong green (buttons/CTAs), a bright blue for important CTAs and a dark blue-gray for the background. This was because:
   • Yellow affects people with autism
   • Orange and red are off limits for colorblind people
   • Need to keep a high level of contrast
3. Keeping a clean and concise layout, by keeping the onscreen info to a minimum (to not overwhelm users who are sensitive to a large flow of information)
4. Simplifying the directions on the navigation screen but also enlarge the most important instructions
5. Add an SOS light blue button visible on all screens throughout the app in the top right corner (visible but not getting in the way)
6. Using easy-to-understand iconography accompanied with its text description, to avoid confusion
7. Buttons were made much larger than the 44*44pt recommended by Apple’s Human Interface Guidelines

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.

Hearing Impairments 👂 Case Study

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]

Visual Impairments 👁️ Case Study

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]

• Navigation links like “categories”, “channels” and “A to Z” are located way down the page, so screen reader users have to go through the whole page before being able to get to know where they need to go to fetch the content they want.

• Links were read twice because the thumbnail image and the heading had separate links that both redirected to the same program. This made it confusing to the screen reader users.
• When keyboard access users clicked the first time on the “categories” link, a panel with only four items would be shown and they had to click again to see the whole listing. How would they know? This one just resulted in users giving up ALTOGETHER on using the platform.

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!

Cognitive Disabilities 🧠 Case Study

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]

1. Use pictures, icons and symbols along with text
2. Use clear and simple text
3. Use consistent navigation and design on every page
4. Use headings, titles and prompts
5. Support screen readers. Use alternate text tags
6. Use larger fonts – fonts in minimum 12pt or 14pt
7. Uncluttered, simple screen layout
8. Maintain white space: Use wide margins
9. Make your website customizable, giving users control of: type size, placement of navigation (right, left side), contrast, large print, sound
10. Use exit, home, help, next page buttons on every page
11. Use sans serif fonts, such as Arial, Verdana, Helvetica, Tahoma
12. Make navigation buttons clear, large, and consistent
13. Use numbered lists rather than bullets
14. Support font enlargement for web browsers
15. Use color for contrast
16. Check reading level with automated tools
17. Don’t right justify text; use ragged-edge righthand margins
18. Use lower case, no ALL CAPS
19. Provide voice captions (audio files) for text
20. Provide audio/voice-overs where the words are read aloud
21. Use navigation methods (i.e. “undo” or “back button” to help user recover when lost)
22. Give feedback on a user’s actions (e.g. confirm correct choices, alert users to errors or possible errors)

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:

• People with cognitive disabilities find it easier to learn using hearing rather than reading. Text to Speech reads aloud anything you highlight across 42 languages and in any voice and rate that suits the user’s preferences, and Speak Screen reads the whole content on a page to the user. [6]
• Darker backgrounds help users with cognitive impairments focus, so when they activate the Dark Mode on Mac OS, text turns white and the background turns dark on built-in apps like the Calendar and Mail apps. [6] I actually use it just because it’s much better in my opinion.
• Sometimes we come across this feature by accident and may find it annoying when that’s the case and we weren’t trying to look up a word. But for many users with learning impairments, the Dictionary feature is helpful because they can access it from anywhere on their computer without disrupting their reading experience. [6]
• For some people, the web experience is overwhelming – even people with no focus impairment find the internet overwhelming. Using Safari Reader, users can focus on the content they want by stripping away ads, buttons, and navigation bars. [6]

🚨 Conclusion

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.

Learn More about Accessibility

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

Adding Accessibility to Your Apps

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

Sources:

📚[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