Making Design Accessible Everywhere — Getting Started
Building something cool but not designed to work for everyone? Well, it’s time you should, after you read this article.
We’re living in an age where people jaw-drop and admire the fancy, artsy user interfaces on Dribbble (dribbblisation of design) and do not care about how functional and usable the product is.
It must be noted that not everyone has a perfect vision, hearing, speaking or cognitive abilities.
Too blurry, isn’t it? There are people who are reading this article just as blurry as the image above. Just imagine the pain such users would have with the product you’ve designed/developed.
Several kinds of disability hinder a person’s ability to perform a task. It could be temporary, permanent or situational.
The CDC (Centre for Disease Control and Prevention) estimates that 1 in 4 Americans have a disability which is preventing them to carry out a common task when interacting with the web or mobile.
When we look at this on a global scale, 15% of the world’s population i.e. 1 Billion people experience some form of disability and it’s more prevalent in the developing countries.
People with visual, auditory, motor, cognitive and situational disabilities find it very hard to access content on the web. It’s very essential for us to include them while designing since that’s where several million dollars or probably billion (if you include their friends and families) of the untapped market lies.
According to the Web Content Accessibility Guidelines, there are 3 standards for accessibility — A, AA, AAA
One of the Guidelines for “A” standard is to provide “alt” text for the content which does not contain text i.e. Images
This is just one of the guidelines — there are several more to each and every standard.
One of the Guidelines for “A” standard is to provide “alt” text for the content which does not contain text i.e. Images.
One of Guidelines for “AAA” standard is to provide sign language for pre-recorded videos.
This is the highest level of accessibility and it enhances both “A” and “AA” standards.
Everyone knows that it’s essential to get user’s feedback to understand their pain points when designing, but we often neglect the people who are disabled.
Hence, when starting out the design phase, make sure you talk to disabled people, empathize with them, ask questions about the kinds of assistive technologies they might be using and design accordingly. One of the examples of assistive technology would be the screen reader on your phone.
If you have a prototype ready, see how the users are using the assistive technology to interact with your prototype.
People suffering from a motor or visual disability often rely on the keyboard (Braille keyboard for visually impaired) to navigate the website. For such users, it is essential to have an icon accompanied by a meaningful label for all kinds of users. Screen readers can read out loud to the user if it has a relevant icon alongside label name.
Users with disabilities and power users in general typically access links, buttons, text fields using the “Tab” and “Arrow” keys. When doing so, there must be a visual indicator, like a background/outline around the particular element to let the users know where they are right now.
How to get started?
- A quick way to get started is to follow a checklist of guidelines for A, AA and AAA standards. One should also note that it’s not necessary to follow all guidelines initially which might result in a good overall experience but bad usability. Don’t overdo it, keep it simple at first. Test and iterate.
Check out the link for checklist over here
2. A good design must be simple, easy to understand, clear and concise. Always make sure that your foreground and background color has a contrast ratio of at least 4.5:1 for AA Standard. For a AAA Standard, the contrast ratio must be at least 7:1
Let’s take an example: A section of Stripe’s Landing page.
Using WebAIM’s Color Contrast Checker, we identified that it passes AA and AAA standards. Text color would be the “Foreground” and Background color would be the “Background Color” while checking in WebAIM’s website.
3. Always make sure each and every component of your design follows the accessibility guidelines and at every phase of the design process, test with your users to make sure you’re heading in the right direction. This is very crucial to understand users. Understand your users, iterate, and repeat!
4. Once you’re done with the design and development phase, test your application with a set of accessibility tools for Android, iOS and the Web.
These tools run automated tests of your application, give audit reports, inform you exactly where you have gone wrong and how you can improve.
For the web, Chrome Dev Tools is baked with Accessibility Audit Toolswhich tests your website in every possible way. It’s found under the Chrome Developer Tools.
I hope I’ve shared information about accessible design. You can reach out to me on Twitter if you have any queries and I would be happy to answer them.
Additionally, if you think I’ve missed out on something, please do comment or DM me on Twitter and I would be happy to append that information in this article. I wish you a fantastic week ahead!