Whether you’re looking for business reasons, ethical arguments, legal safety, or just creating a better product, the case for accessible design makes itself. And, with over one billion people worldwide living with a disability, the need for an accessible internet is urgent—and growing every day.
But accessible design is a huge concept, and a hard one to master at that. With endless requirements from both design and development, it can feel like an overwhelming process.
We’ve created a list of eight tools that will help you in your accessible web design process, from color accessibility to crossing T’s and dotting I’s.
1. Mismatch.design
Use cases: Explaining the value of design to clients or stakeholders; finding leaders in the inclusive design community.
Founded by Kat Holmes, Mismatch.design is a “community and a digital magazine dedicated to advancing inclusive design.” It’s perfect for learning the stories and narratives behind accessible design—which will make these practices feel so much more worthwhile.
Inclusive design is such a large topic that designers have trouble getting started. By creating a community of inclusive design practitioners, Holmes has established a center for reliable resources, shared stories, and improving the craft.
On the discussion of writing about inclusion, Holmes writes, “In order to write about inclusion, I needed to start with recognizing exclusion. We’ve all experienced exclusion in our lives…Our own experiences with exclusion can be crystal clear…
What if we could anticipate the kinds of exclusion that someone might experience with a solution that we create before we release it into society?”
*Mismatch.design is a recipient of InVision’s Design Forward Fund grant.
2. We are Colorblind
Use cases: Advocate for color accessible design; discover resources for color-accessible design
“We are Colorblind is dedicated to the more than 300 million people who are colorblind.” Founded by Tom Van Beveren, who himself is colorblind, We are Colorblind is a one-stop-shop for color-accessible design needs.
In addition to news stories and design resources, We are Colorblind offers consultancy services and product checks to help optimize for color accessibility and usability. A page of their website is dedicated to examples of what works and what doesn’t, giving a reference for designers wanting to check themselves against mainstream benchmarks.
*We are Colorblind is a recipient of InVision’s Design Forward Fund grant.
3. The A11y Project
Use cases: Code repositories for accessible design; tips for quickly and efficiently explaining and implementing accessible design.
The A11Y Project is an open-source, community-driven effort to make web accessibility easier run by volunteers driven to make the web easier to use—for everyone.
Including myths, quick tests, quick tips, assistive technology, how-tos, and background, the Project is a comprehensive guide to all things accessible—including WCAG and going well beyond.
The Project goes well beyond explaining best practices; their “background” section gives primers on the common impairments afflicting people needing accessible services.
*The A11y Project is a recipient of InVision’s Design Forward Fund grant.
4. Stark
Use case: Baking accessibility into your design process.
Accessible design works better when it’s intentional. “The Inclusive Design Imperative”, released by Forrester Research, Inc. includes a horror story of an anonymous Fortune 500 company that spent $20 million per year remediating existing digital products to meet accessibility standards.
However, after implementing accessibility into their design process for new products, they cut that staggering cost by 75%.
Dang. That’s an argument for including accessibility in early design stages.
A plugin for Sketch and Adobe XD, Stark “empowers you to design with accessibility in mind from conception of brand to fruition of product.” Founded by Cat Noone, Michael Fouquet, Benedikt Lehnert, and Agis Tsaraboulidis, Stark is used by some of the most recognized brands in the world—helping, as they say, “ensure the work we sign our name on is truly complete.”
By embedding accessibility tools into the design process, Stark lets designers create their best designs from the get-go. The plugin’s tools include a contrast checker and colorblind simulation, streamlining the color accessibility process.
5. Contrast
Use case: Checking interface contrast for accessibility standards
One of the most common excuses for not including accessibility in the design process is that it takes up valuable time. Contrast, which sits in your Mac’s menu bar, shoots that excuse right down.
This app has one purpose: to quickly test your interface contrast. Accessible interface design begins with proper text-to-background contrast, as Contrast cofounder Matthew D. Smith says; having this handy-dandy tool right up there in your menu gives you a full analysis of your interface accessibility, literally with just a click.
6. The A11y Machine
Another version of the “too time-consuming” excuse for not implementing accessible design practice on older designs is, well, that it’s too time-consuming.
A11ym (as it’s known in internet slang) to the rescue. This automated accessibility tools crawls and tests web pages—and comes back with an automatically-generated detailed report. It checks the pages against the three most common guidelines: W3C Web Content Accessibility Guidelines (WCAG) 2.0; U.S. Section 508 legislation, and
URL-specific reports look like this:
Image courtesy of a11ym’s Github
As far as privacy goes, a11ym’s advantage over other SaaS services is that it runs locally, so you don’t have to send your code anywhere else. It’s a great perk.
7. Accessibility Checklist
Use case: Checking off accessibility needs during design, dev, and test processes
For those one billion people with disabilities in the world, their need to be a lot of accessibility standards. Which is why we need a checklist.
This checklist, encompassing Section 508 and WCAG 2.0, 2.1 standards, is a thorough step-by-step list of what your web product needs to be fully accessible to people with disabilities—both from legal and ethical standpoints.
The checklist is massive. However, its creators blessed us with a tagging functionality—allowing you to search by function, feature, and code type. Only working on CSS? Coming right up.
Tl;dr explanations are split for designers, developers, and testers, with designers and developers getting one-pagers for free downloadable one-page summaries of accessibility requirements (direct download for designers here, and developers here).
At the end of the checklist is a list of links that further explain accessibility guidelines, including testing tools and color pickers.
8. Axe Chrome plugin
Use case: In-browser, location-based a11y checking.
The Axe plugin is an in-browser accessibility tool for Chrome Developer Tools. “Drop the axe,” as they say, on accessibility issues fast with the detailed report the plugin provides, including solutions.
As they write on their Chrome Store page, “it only tests for accessibility issues that can be accurately detected via automation, and it only tests for components that actually exist on the page or application you’re testing.”
One reviewer noted a major advantage: It’s available for checking intranet sites that you might not want to hand over yet to other testers—giving you privacy and functionality together.
Feature image via Laura Turner Design.
Want to read more about accessible design?
Shayna is Managing Editor of InVision's design publication, Inside Design. She lives in Tel Aviv with two big dogs.
