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…



This content originally appeared on DigitalA11Y and was authored by Raghavendra Satish Peri

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 accessibility audits and annotate their designs as this will help developers to write semantic code which in turn bakes in accessibility from start.

Accessibility Tools for Figma

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

  1. A11y Focus Orderer:
    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 Orderer 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:
    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. 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.
  8. 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.

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.

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.

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

Explore our Accessibility Resources


This content originally appeared on DigitalA11Y and was authored by Raghavendra Satish Peri


Print Share Comment Cite Upload Translate Updates
APA

Raghavendra Satish Peri | Sciencx (2022-06-19T07:17:49+00:00) Accessibility Tools and Resources for Designers. Retrieved from https://www.scien.cx/2022/06/19/accessibility-tools-and-resources-for-designers/

MLA
" » Accessibility Tools and Resources for Designers." Raghavendra Satish Peri | Sciencx - Sunday June 19, 2022, https://www.scien.cx/2022/06/19/accessibility-tools-and-resources-for-designers/
HARVARD
Raghavendra Satish Peri | Sciencx Sunday June 19, 2022 » Accessibility Tools and Resources for Designers., viewed ,<https://www.scien.cx/2022/06/19/accessibility-tools-and-resources-for-designers/>
VANCOUVER
Raghavendra Satish Peri | Sciencx - » Accessibility Tools and Resources for Designers. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/06/19/accessibility-tools-and-resources-for-designers/
CHICAGO
" » Accessibility Tools and Resources for Designers." Raghavendra Satish Peri | Sciencx - Accessed . https://www.scien.cx/2022/06/19/accessibility-tools-and-resources-for-designers/
IEEE
" » Accessibility Tools and Resources for Designers." Raghavendra Satish Peri | Sciencx [Online]. Available: https://www.scien.cx/2022/06/19/accessibility-tools-and-resources-for-designers/. [Accessed: ]
rf:citation
» Accessibility Tools and Resources for Designers | Raghavendra Satish Peri | Sciencx | https://www.scien.cx/2022/06/19/accessibility-tools-and-resources-for-designers/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts