Accessibility - The power of Caring
Writers: Federica Micheli and Ain Sahimi
Ciao everyone,
Welcome to the class Accessibility 101 ... kidding, or am I? we'll see about that.
Back when I joined Tyk (a whole 7 months ago 🤯) I had a lot of fun snooping around our product, especially from a UX perspective, noting down all that I found odd or peculiar. No stone left unturned, a whole lot of questions and so much inspiration for new projects, that was the result of my quest. Not to mention how this kickstarted the Product Guide.
It was late summer this year when @Richard Johnston​ and @Paul Cooper​ approached me to collaborate on the website: they were specifically interested in my annotations and how we could improve the website from a UX perspective. Needless to say, I was THRILLED.
The first goal I set for this project was not only to help the web team improve the success of the website but also to lay the foundations for something extremely important to me and the very core of UX Design: Accessibility.
But what is Accessibility?
Web accessibility, or eAccessibility, is the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, websites on the World Wide Web by people with physical disabilities, situational disabilities, and socio-economic restrictions on bandwidth and speed. When sites are correctly designed, developed, and edited, more users have equal access to information and functionality.
But why is it important?
Currently, many sites and tools are developed with accessibility barriers that make them difficult or impossible for some people to use. This is also the case at Tyk, though not so bad.
Making the web accessible benefits individuals, businesses, and society. International web standards define what is needed for accessibility. It is essential for developers and organizations that want to create high-quality websites and web tools, and not exclude people from using their products and services.
“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect ”
That's when @Ain Sahimi​ came to my aid. The floor is yours, darling...
Thanks, Fede... and hello everyone!
Accessibility research
🥸: “I don’t like our green”
🤓: “Why don’t you like our green? I think it’s beautiful”
🥸: “I can’t read properly using that color”
🤓: “But I can?”
That my friends, is an example of an accessibility issue. What do we UI/UX-ers do, then? We stand against biases (never a personal thing), we listen and try to solve them.
But solving them is not as simple as introducing better colors or making everything as big as possible, closing our laptops, and calling it a day with a beer in our hand. It goes deeper than that. It is a choice that needs to go through multiple testing, and discussions/critiques with guardians of the brand or those who work with it, before finally settling on an agreement.
Example of tests done on colors using https://colourcontrast.cc/
Level A: the most basic Web accessibility features;
Level AA: the most common barriers for disabled people;
Level AAA: the highest level of accessibility.
Application of colors
I’m glad to tell you all that those mentioned above are almost done . Working very closely with the brand team, we have improved our color palette by introducing lighter and darker shades of individual primary brand colors. We were very careful that the new colors don't stray from the brand's vision but still live in the spectrum. Below are examples of how we have applied them, as you can see the difference is subtle, but once applied to copy or wireframes, it's like magic.
Old vs new palette (in progress)
How it is applied on components with improved accessibility.
The next big issue
As we happily thought that we could now proceed with applying the new colors to our components, we noticed one more major thing that is in need of dire help. Our fonts. ✍️
Working on some product UI for a few months now, we realized that our body fonts can get a little too small. Moreover, typography styles are hard to remember and some are rarely used at all.
So with Fede, we increased all the body fonts by at least 2px, cut out some styles, and introduced an improved set of headings with better variations.
Old vs new fonts.
My goal as a UI guardian
As the recent owner of the product guide, my aim is not only to look at accessibility issues but also the inconsistencies across our patterns. What we currently have is great, but as we scale and improve our products, so does a need to improve our product guide. Therefore, what I aim for, is to combine these two goals into one.
Next steps?
I know we can’t aim for perfection and that the road ahead won’t be an easy one, but soon there will be an improved version of the product guide, namely our Design Library, that will aid our company to design their best.
Now that we have finalized the UI fonts and colors, we’re all set for application across all components baby! 🤩🤩🤩
Below is a better understanding of the timeline. We’re halfway there!
I hope this was an enjoyable first read. In part II of the next blog, we will share more of the UI work we’ve done for the product guide - introducing you to the new and improved components.
2022 will be a good year, I can feel it - Ain
Special shout out to @Rogier Beeftink​​, @Sandra Lindholm,​ and @Katrien Verlinden​ for all the help to improve our work. Things are better because of your contribution! So, thank you
