Skip to content

Accessibility tools and plugins that designers should be using

The article “Best Chrome Plugins Designers should be using” did not contain any accessibility plugins. There, I fixed that for you 🙂

Designers have their choice of countless tools, many of which are convenient plugins that are integrated with Chrome. If you are a designer and are not considering accessibility in your designs, you are:

  1. Not doing your job. You are supposed to be designing for EVERYONE, and by failing to consider accessibility, you are designing for only 82 % of your potential audience
  2. Discriminating against people with disabilities
  3. Potentially putting your client at legal risk, especially after the Supreme Court backing accessibility as a requirement in Domino’s

Vision

The first four items on my “favorite accessible design tools” list are all related to vision loss. Like most disabilities, vision loss is a continuum from completely sighted to completely unsighted with lots of stops in between. Working with a screen reader is definitely not enough.

No Coffee (Chrome Plugin)

Can’t understand what it’s like to have vision loss and try to navigate through your design? Then this is a plugin that will help. No Coffee is a Chrome plugin that simulates all kinds of levels of vision loss. No Coffee is best at simulating:

  • Low Acuity
  • Visual snow, glare, ghosting and cataracts.
  • Nystagmus (rapid, involuntary, oscillatory movement of the eyes).
  • Obstructed visual field: including floaters, retinal detachment, obstructed central vision (glaucoma), spotty vision (diabetic retinopathy) or obstructed peripheral vision (retinitis pigmentosa or macular degeneration)

Paciello Group Colour Contrast Analyser (Tool)

The TPG CCA is the best (I think) of the tools out there at automatically calculating color ratios and simulating color blindness for non-complicated text against one background color. Totally accessible UI, for the win !!

Coblis (website)

If you want to see what an complicated image looks like to someone who is color blind, visit Coblis, select the type of color blindness (deuteranopia is most common) and drop your picture in. Before you can say Shazaam your picture will be re-rendered as how it would appear to someone with the form of color blindness you selected.

Stark (Adobe XD / Sketch / Figma plugin)

You can’t have too many color tools. Because color is literally the most expensive thing to fix if you screw it up, and it also takes the longest. But wait, you say, “all I have to do is tweak the hex code in the HTML page. How expensive is that?” Well, if you have trademarks based on the inaccessible colors, or collateral based on the inaccessible colors, it can be very very very expensive. Stark helps you avoid bad color choices, and all while embedded in design tools that you, in all likelihood, are already be using.

Dyslexia

The next two tools on my list are related to dyslexia.

Line Height Adjuster (Chrome Plugin)

Want to test your prototype to see how well it does with the new Text Spacing guideline that is there to help people with dyslexia? Then this little plugin is a must have.

Dyslexia Unscrambled (Chrome Plugin)

This plugin, which is really an extension of the Open Dyslexic font, makes suggestions to how you can reorganize your blocks of text to make them more readable to a person with dyslexia.

Information

The last two items on my list are more disability-agnostic, but really good pieces of reference material to review if you ever need something explained regarding accessibility in English.

Elsevier’s Accessibility Checklist for Designers (Website / .PDF file)

While it is true I am not the hugest fan of accessibility checklists, there is something to be said for having one in language that you understand while you are getting started. The Elsevier Accessibility Checklist for Designers is just that. Rather than using the regulatory language that is associated with WCAG guidelines, this checklist has straightforward instructions, like:

Create visible labels for input fields and other form elements, such as radio buttons, checkboxes, and select dropdowns

with links to the relevant WCAG success criteria.

BBC Accessibility Criteria (website)

The BBC has the best accessibility guidelines, bar none, especially for multimedia. Whenever I want to check something on multimedia, that is my first stop. Also a completely accessible UI.

Conclusion

So, there is lots of good tools out there to help you in making your design as accessible as possible.

If I missed your favorite accessibility design tool, please list it in the comments, I can learn from you as much as you can learn from me ! Please do NOT list any automated code analysis tools — this article is intended for design tools only. Accessibility consulting companies, my blogs are not places you get to advertise for free. You know who you are.

Published inAccessibilityDesignDisabilitiesUX

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

eleven + 17 =

Share This