The Lazy Designer's Accessible Design Toolkit

 

You’ve got a good heart. You want people of all ages and abilities to enjoy the websites, apps, and graphics you’ve designed. But man oh man who has the time to read through all the Web Content Accessibility Guidelines?!

Other people, apparently. Which means you and I don’t have to! #blessed

(Ok, we probably should...but we’ll do that later)

For now, you can join me in using these super easy, lazy-person friendly tools to make sure your designs are up to accessibility snuff.

A hip, tattooed designer reaches into the accessibility design toolkit to grab some goodies that will help users everywhere!

A hip, tattooed designer reaches into the accessibility design toolkit to grab some goodies that will help users everywhere!

 
 

1. Siteimprove Accessibility Checker Chrome Extension

This tool allows you to check any web page for accessibility issues at any time. After installing the plug in, all you have to do is click it when you’re on a page you want to evaluate. It will give you an overview of the issues, explanations about how the issues affect your users, and suggestions for how to fix them.

2. WAVE Web Accessibility Evaluation Tool

This tool is very similar to Siteimprove’s accessibility checker, but it’s a website in which you can input the url of a page you want to evaluate for accessibility issues. After inputting the url, WAVE will give you an overview of the issues, marked with icons on the web page itself.

Siteimprove looks a bit more sleek and modern, but I think it could do a better job showing the different types of usability issues. Personally, I think WAVE does a better job showing the various issues with their use of different icons and colors.

3. Google’s Material Design Color Tool

This tool tests color contrast and text readability. Simply select your desired colors, and this tool will show you how both white and black text show up on it, the level of readability, and light and dark variations.

If you’re in the early stages of branding and design for a digital product, use Google’s Material Design Color Tool to test your color palettes for accessibility. If, at the start, you ensure that your brand colors have enough contrast, you will run across fewer readability issues as you go along.

4. Funkify Chrome Extension

In my opinion, this tool is less an accessibility tester, and more of an empathy developer. But, really, it does both.

Funkify allows you to view your site through the eyes of people with different disabilities. You can view your site through the eyes of people with different types of vision impairments, from color blindness to near- and far-sightedness. Or, you can view your site as someone with dyslexia, sensory sensitivity, or tremors.

Assuming you are able-bodied, using this tool should allow you to empathize more with those who have disabilities, and therefore hopefully create more accessible designs.

In conclusion…

The tools listed above are stupid easy to use. With a couple clicks, you can check for color contrast, readability, and screen-reader accessibility, to name a few common issues. What used to take hours of combing through the WCAG guidelines and running through accessibility checklists can now get done in minutes.

So, basically you (and I) have no excuse.

Creating designs that are usable by people of varying abilities is not only the good, kind thing to do, but it also makes business sense. A lot of people have disabilities that affect their capacity to use the internet, and a lot of websites and apps don’t account for this. If you can create digital products with differently-abled people in mind, you open yourself up to a new well of users.