Can enterprise products be accessible?
SOFTWARE AS A SERVICE (SaaS), WEB ACCESSIBILITY
Wolftech, a Norwegian company, develops multi-platform tools for global news, entertainment, and sports industries. As Lead Product Designer, I led UX/UI design for features like equipment booking and shoot scheduling. The case study below details my work with the BBC (UK) on accessibility research, improving task completion by 40% for users with disabilities.
CLIENTS
TEAM
Nikki Ajit
Øle Morten
Irena Gjengstø
Eirik Blakstad - Lead Dev
DURATION
Oct 2020
(2 weeks)
ROLE
Lead Product Designer
OVERVIEW
Web applications, especially B2B ones are often not optimised for accessibility.
User Feedback and Research loops informed our team of issues some users were facing while using our products. The users were people with visual impairments (VI) such as blindness and partial sightedness who primarily use screen readers to navigate devices and web pages. Others who had types of colour vision deficiency (CVD) use high-contrast modes to make differences between colours more distinct.
Given that two of our major clients operate in the news sector, time is of utmost importance to our users. Loss of time directly impacts productivity, motivation, and, on the business side, the adoption of our software by clients. Our objective was to ensure a seamless user experience for all individuals, irrespective of any personal disabilities.
PROBLEM
Features of our software suite are arduous for people with visual impairments.
We identified elements that were recurring and had the largest impact on productivity - Forms, Date Picker and Colour Contrast.
285 MM people globally can't read all web content due to a visual impairment.
World Health Organization, 2014
Less than 3% B2B websites are accessible to users with disabilities.
WebAIM, 2020
Screen-reader users receive information 61.5% less accurately and spend 211% more time than
non-screen-reader users.
University of Washington, 2020.
SOLUTION
A custom datepicker and brand new colour palette with web accessibility compliance.
DISCOVERY
Web Accessibility and Assistive technology (AT).
Web accessibility is the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, websites on the World Wide Web for people with disabilities such as blindness.
AT enables people with disabilities to access technology. For those who are blind, the main AT are screen readers, braille displays, and speech recognition software. Our users use the screen reader JAWS.
Inclusivity and accessibility.
In order to put our users at ease when conducting interviews we had to inform ourselves on guidelines around respectfully communicating with or about people with disabilities. We learned that the right way to do that is to use Person-first language instead of Identity-first language.
Crucial resources.
W3C's Web Accessibility Initiative (WAI) and WebAIM are crucial resources for evolving technologies and use cases in design and development.
USER RESEARCH
The Web Development Lead and I enquired further.
Unstructured Personal Interviews with a blind user gave us information on personal challenges and preferences, while Contextual Inquiries helped answer questions such as "Method (a) reads out less information. Do you prefer (a) or (b)?" and "What did you like/dislike about this feature/process?"
"I've been using screen readers for the better part of my life. Most times I can keep up with a non-disabled user if only the software will work with me."
"Less text to read doesn't make my task easier. Sometimes I need all that information to make a decision."
USER PERSONAS
The Super User
Salim is a journalist with the BBC in the UK. He is outspoken, enthusiastic and open shares his experience of the world both online and offline with regards to his disability, blindness.
Goal: complete tasks quickly and work independently of a support worker
Frustration: forms, controls like radio buttons and unclear instructions when errors occur
General comfort with our software
KEY INSIGHTS
Screen readers need relevant labels to identify form controls.
Controls like radio buttons and datepickers are not accessible.
Colour contrast should comply with at least AA level.
Using colours as category indicators is not inclusive.
IDEATION
What does an accessible Datepicker need?
We used to have three different types of datepickers for various purposes such as a single date, date range and historical dates. This was an opportunity to update and combine functionalities as well as make it accessible.
Option to type the date.
Keep date ranges consistent and avoid shifting date ranges for range pairs.
Affordance for keyboard shortcuts with shortcut keys in the tooltip.
Automatically format the date after the user hits “Enter“ or navigates out of the text field.
VISUAL DESIGN
One custom datepicker that does it all.
Option to type the date
Seamlessly scroll months and years
Simple, labelled checkboxes instead of radio buttons
Date format automatically adjusted on clicking out of field.
Date range can be locked for consistency, from either start or end date.
Keyboard controllable
HOW IT WORKS
Here is an example of the datepicker in practice.
BRANDING & UI
Colour palette with accessible contrast.
A good contrast ratio is 4.5:1 between the foreground and background colours and a great contrast ratio is 7:1. Starting with our brand colours, I created a full spectrum palette including colours success and error notifications for both light and dark modes.
COLOURS [Light mode]
ORANGE
#FE5B00
Black text, large
Contrast
Ratio 6.71:1
AAA compliant
WHITE
#FFFFFF
Black text, small
Contrast
Ratio 21:1
AAA compliant
BLACK
#000000
White text, small
Contrast
Ratio 21:1
AAA compliant
HOW IT WORKS
Finally, apart from the issue of colour contrast, users with CVD found it difficult to identity and differentiate between categories of content, alerts and system statuses. We introduced shapes, text and icons to either replace or support them. Here is an example of a legend on a TV production timeline that uses this in practice.
CONCLUSION
3 months after the features were released and almost immediately after the new colour system was launched, we received grateful messages from our target users as well as many others with milder forms of visual impairments. Salim was able to complete specific tasks 40% quicker than before. We tested these features with two of our largest clients, the BBC in the UK and Vice Media in the US, and were set to extend them to all our clients across Europe and USA.
Working to improve accessibility issues in software was one of the most enriching experiences of my career. It is something that is rarely considered a priority, especially on B2B platforms, but as we are progressing toward a more inclusive world, a designer plays a part in that too and web accessibility is worth the fight. It's made me a more passionate and compassionate designer and I carry the lessons with me.