Figma Plugins that aid Accessibility
Accessibility has become a watchword for many brands and products. It’s no secret that designers take extra care to make sure they design with accessibility in mind, so we’ll be going over some Figma plugins that will help us achieve design-accessible products.
Whether you have been using Figma or just starting your journey, this article will be of immense value to you.
Table of Contents
- Assistive Technology
- Type Readability
- Contrast
- Vision
Assistive Technology
With these plugins, designers take accessibility to whole new heights as they consider assistive technology. Making sure that our designs are inclusive for all regardless of their abilities and enhance the usability of the products.
A11y — Focus Order: This plugin addresses a specific corner of accessibility, which is often brought up when discussing visual elements such as color, contrast, and type readability. The A11y — Focus Order aids synergy between designers and engineers, and lets you add accessibility annotations over your designs for the interactive elements of desktop, website, and mobile applications.
Include — Accessibility Annotations is a tool built with the intent of including accessibility considerations during the design phase of any project. With this tool, you have a:
- Step-by-step guide for web and native annotation
- Reading order
- Touch target guidance and self-check for both web and native
- Alternative text
- Responsive reflow
- Complex gestures
- Headings selection from a predefined set.
Axe for Designers: If you are a designer seeking a means to create inclusive digital experiences even as a beginner to accessibility, this tool helps you check your designs and components for touch target, inappropriate headings, hierarchies, and color contrast for WCAG compliance with a single touch.
It also provides an extensive set of annotation stamps with a short recommendation and detailed documentation for your developers ensuring your intents are communicated.
Type Readability
In this section, we will look at plugins that help you bring your A-game when it concerns readability.
This is important because readability determines how easy or difficult it is to understand a piece of text, it affects how the user can successfully process and make meaning of the text. Your product could tilt towards unbearable when it becomes hard to properly read the contents.
From spelling to grammar checks to checking for adaptability of font sizes for different devices, these plugins could be a lifesaver!
SpellCheck is a proven tool that checks your spellings as you work on Figma, it draws your attention to those that are spelled incorrectly by highlighting them and offers suggestions for alternative words, so you can choose any that sounds best.
This plugin offers features ranging from:
- White space check
- Spell-check all text layers on a particular page
- Multiple languages are supported including English, French, German, Portuguese, Italian, Spanish, Japanese, Russian, Chinese, and Greek
- Dark theme support
- Compact View
Sapling.ai is an AI extension that makes grammar and spelling suggestions to help you write on-point messages and content. It uses deep learning technology (akin to GPT-2/GPT-3) to provide the best recommendations.
You can use sapling to rephrase and maintain a professional writing tone across your business team.
This tool also secures your data as sapling undergoes external testing and audits, enterprise-grade security policies, and procedures. It also provides an API and self-hosting offering.
We all make typos sometimes but it does not have to affect our design quality. With Speller, you can:
- fast scan a whole page or specific artboard focus to find the place of your typo on the canvas
- exclude words that are not mistakes for you and they will not be checked as mistakes in the future
- Auto-fix all same mistakes by fixing one of them
- 16 certified language dictionaries
- Low memory use, so fewer chances to see “red line alert”
Text Resizer helps you update your designs quickly and flexibly for the base font size defined for 1rem. It also comes in handy when you design apps for IOS as this plugin will help your designs adapt to the system’s ability to increase or decrease font sizes.
As a designer, readability should be a priority and this plugin ensures that your layout is flexible and the texts are legible for users.
Lokalise is an all-in-one localization and translation management tool that allows developers, designers, translators, and product managers to work seamlessly together and deliver products to multiple international markets in a faster and more efficient way. With this plugin, you can quickly include translated content in your designs.
Contrast
Good use of contrast adds visual interest, establishes a hierarchy, and ensures our designs are accessible to users. Contrast helps you get your users to pay attention to not just the design but the message you’re trying to pass across.
It is also important to note that while good contrast attracts a poorly contrasting design could repel users or make it difficult for them to achieve the purpose of that design.
We will now be looking at a couple of plugins that could make achieving adequate contrast possible even with little or no knowledge.
A11y — Color Contrast Checker 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. The plugin currently only supports single, 100% solid fills.
If you struggle with color generation, Foundation Color Generator is the tool kit that helps you create fast color palettes using state-of-the-art design systems as a reference. You can ensure that your colors are accessible by checking the contrast ratio right from the shade generator.
This plugin offers:
- Color tokens
- Contrast checker
- Style generator
- Palette render
- Color name generator.
Contrast makes it easy to check the contrast ratios of colors as you work. All you need do is select a layer and contrast will immediately look for the color directly behind your selection and serve up the contrast ratio along with passing and failing levels from the Web Contrast Accessibility Guidelines (WCAG). It works on any element, not just text, supports solid, transparent, blended fills, layered fills, and backgrounds, and updates as you change the selected element’s color, opacity, or blend.
It is fast, responsive, and can be kept open as you work. Contrast can also compare an element’s color with the colors it finds in gradients and images in the background.
Stark is a powerful combination of integrated tools like contrast checker, focus order, Alt text annotations, and vision stimulator.
With Stark, you can check contrast ratios and get color suggestions to ensure your designs always adhere to AA or AAA requirements, stimulate what your design may look like for people with different types of vision, including 4 different forms of color blindness and blurred vision, and generate any simulation as a frame that lives alongside your exciting design. So you can give your team a better sense of what people with different vision types may see and more.
Vision
You can ensure your website is accessible to everyone regardless of visual impairment by incorporating the usage of these plugins into your work.
A lot of people suffer from color blindness which is not blindness but rather a deficiency in color vision. It is the inability (or sometimes decreased ability) to see certain colors or perceive color contrasts in normal light.
The Interaction Design Foundation gave an extensive view of vision and visual perception challenges.
As designers, we need to be aware that there are common processing errors and, in particular, to be aware of visual stress and color blindness so that we can adjust our designs to minimize the impacts of these errors.
Low Vision is a simulator that checks your designs against different types of visual impairments and scenarios to create more accessible designs. All you need do is select a frame of an element, run the plugin, and choose a field of visual impairment and visual acuity range.
Color Blind allows you to view your designs in the 8 different types of color vision deficiencies. Just make a selection and the plugin will clone it and create versions with the colors changed based on what each each one would look like to a person with that type of color blindness. Each copy is contained within a group that is labeled with the color blindness type.
You can also choose to view only certain types of color blindness by toggling the checkboxes in the plugin UI.
Accessibility Simulator is a Figma plugin that helps designers better understand the challenges faced by users with common visual impairments. By simulating different types of vision issues, an accessibility simulator equips designers to identify potential accessibility issues early in the design process ensuring a more inclusive user experience.
With the accessibility simulator, you get:
- Light sensibility
- Vision loss (Acute and severe)
- Color blindness (RG and BY)
Able Friction-free accessibility makes accessibility easy, add color contrast and color blindness to your workflow with as little effort as possible. Open Able and automatically compare the contrast between the two layers you select. This way you can keep Able open and select layers to compare without re-running or updating the plugin.
You can also simulate different types of color blindness in your selected layers in the preview, copy the contrast ratio, and scores, and paste them into your color style descriptions as documentation.
Adee Comprehensive Accessibility tool is an accessibility testing tool that gives you access to a wide range of features including:
- Alt text generator
- Touch Target size standard and smart suggestion to meet the standards and requirements to make sure your design is accessible on touch devices.
- Comprehensive contrast checker and colorblind simulator while letting you share test results with your team.
Using the Color Blind plugin, you get accurate and real-time simulation of your designs based on the type of disorder you have selected.
This plugin lets you preview your designs with different types of disorders and attach your preview to your designs.
Summary
This article has explored some Figma plugins that help designers achieve accessibility when creating their designs. There are a couple of other plugins that can be found in the Figma community. If there is any plugin you frequently use to ensure your designs meet the accessibility standards you could share in the comments as well!
