Accessibility Tools and Resources for Designers

Here are a set of tools and resources for designers to inculcate accessibility into their designs, often organizations talk about shift left approach when they talk about accessibility, and we believe these accessibility tools will make it easy and reduce the number of accessibility defects during the development phase.

As an accessibility specialist I often suggest my clients to perform design annotations as this will help developers to write semantic code which in turn bakes in accessibility from start . An accessibility audit service is generally obtained at the end of the development life cycle and in our experience, we realized that this approach is costlier in terms of both technical debt and money for the organizations.

Accessibility Tools for Figma

Here is a compiled list of plugins using Figma for designers to create accessible digital content:

1. A11y Focus Order by Microsoft:
   This plugin allows designers to annotate their designs for indication of where and in what order the browser should change the focus to. It’s crucial for input types that aren’t cursor based, including swipe-to-focus capabilities on Android and iOS, and any keyboard navigation on a computer. With this plugin, you can select an element and use the plugin to create a focal point. If you need to change the order of the focus, you can do it all in the plugin UI by dragging to change their order and Focus Order will take care of renumbering them all on canvas. You can also use the plugin to test and tab through all the elements as well. This is a great way to treat accessibility as a first-class citizen during your design to implementation process.
2. A11y – Color Contrast Checker:
   A11y is the the abbreviation for accessibility. Aptly named, the A11y plugin for Figma is one of the most popular plugins. It ensures text is readable for users by adhering to Web Content Accessibility Guidelines (WCAG) and you can also check the contrast ratio of your entire Figma artboard to preview what it will look like on your website or app.
3. Able:
   Able is plugin designed to check color contrast. It analyzes the color of two objects that you have selected and it updates as you change your selection. The plugin also takes your colors and gives you a text/background preview and an option that enables you to simulate what those colors will look like through the lens of different types of color blindness. You can also swap the colors between the text and background color.
4. Color Blind:
   Color Blind is a plugin designed to help you preview color schemes from the perspective of people with varying degrees of color blindness. By viewing your designs in the 8 different types of color vision deficiency, you can see how each one would change to suit a person with that type of color blindness.
   One of the unique things about this plugin is that it generates visuals on canvas based on whatever elements you have selected. The plugin will create duplicates of your design and change the colors to reflect each type of vision in an appropriately named group.
5. Contrast Checker:
   This plugin checks the color contrast ratio of all visible text in a frame, and it provides feedback on whether it meets WCAG’s AA and/or AAA level compliance. It also provides color sliders that allow users to adjust the colors and understand how the corresponding contrast ratio changes in real-time.
6. Hemingway:
   This Figma plugin serves as a rough barometer for knowing if the content is on the right track and is available in the Hemingway app.
7. Include—Accessibility Annotations
   Include is a tool built to make annotating for accessibility (a11y) easier—easier for designers to spec and easier for developers to understand what is required. The intent is to have accessibility considerations included during the design phase of any project, and to help with the designer-developer collaboration. Ultimately creating digital experiences that anybody can use!
8. Stark:
   Stark includes a set of integrated tools that allows you to inspect contrast levels in your designs with Contrast Checker, discover AA and AAA passing color alternatives with Smart Color Suggestions, experience your design through another’s eyes with Vision Simulations, dig deeper into your project’s colors with Vision Generator, evaluate changes on the fly with our Chrome extension and simplify handoffs with sequences built in Focus Order.
9. Text Resizer:
   Text Resizer allows you to precisely understand how the design of your digital content functions when text is adjusted. Text size modification is a common change made by a majority of people irrespective of visual impairments. Allowing the user to adjust text size is a WCAG requirement and is supported by all OS and browsers if implemented correctly.
10. WCAG Plugin
    This plugin enhances the accessibility of digital designs by integrating accessibility guidelines directly into your design processes and systems. The WCAG Plugin offers three key features: Guideline Search, Notation Cards & Utility Tokens

Accessibility Annotation Toolkit

A curated accessibility annotation toolkit list for Figma

• A11y Annotation Kit by Indeed
  We use this library at Indeed to help designers document accessibility considerations to share with developers when handing off designs. It’s quick and easy to add callouts for elements, indicate focus order, or specify keyboard interactions.
• A11y Annotation Kit by Intopia
• Annotating designs with accessibility information is a powerful way to focus on accessibility early in the design phase, as well as communicate your accessibility requirements to developers and testers.
• A11y Annotation Kit by Twitter
  Accessibility annotations are a hands-on, efficient, and scalable way for designers to communicate needs to engineers. This includes designers without prior accessibility experience. Using them ensures that designs will be compatible with various assistive technologies across web, iOS, and Android.
• Web Accessibility Annotation Kit by CVS Health
  Customizations and style changes can be made easily, and it comes with tools to help ensure that components don’t break and no data is lost when publishing your own library updates. This kit makes it more easy and efficient than ever before to fill out common properties for all types of elements. Included in the kit are multiple formats of annotation components for buttons, headings, images, landmarks, links, inputs, focus order, reading order, notes and utilities.

Accessibility Tools for Sketch

• Sketch Accessibility Assistant:
  The Accessibility Assistant ensures that your Sketch elements pass AA+ compliance based on the Web Content Accessibility Guidelines. It automatically detects accessibility infractions and sends out a notification.
• Cluse:
  Cluse is the most comprehensive color contrast plugin for Sketch that ensures your products are WCAG 2.0 accessible.
• Stark:
  Stark includes a set of integrated tools that allows you to inspect contrast levels in your designs with Contrast Checker, discover AA and AAA passing color alternatives with Smart Color Suggestions, experience your design through another’s eyes with Vision Simulations, dig deeper into your project’s colors with Vision Generator, evaluate changes on the fly with our Chrome extension and simplify handoffs with sequences built in Focus Order.

Tutorial on how to Annotate your Designs

Annotating designs with accessibility information is a powerful way to focus on accessibility early in the design phase, as well as communicate your accessibility requirements to developers and testers. Sarah and Claire will cover how to add accessibility annotations in components, patterns and complete wireframes using popular design tools such as Figma.

Please find the presentation for Annotating Designs for Accessibility

Related Design Accessibility Articles

• Resources for Designers by WAI
• Web Accessibility for Designers
• Create Accessible Designs using the Figma A11y Annotation kit
• The Many Benefits of Annotating Your Wireframes
• Accessibility for UX Designers
• Accessibility for Graphic Designers