Empowering your workflow with an accessibility toolkit.
When it comes to creating inclusive and accessible products, having the right tools at your disposal is essential. In this blog post, we will go over a selection of must-try Figma plugins that can assist you in prioritizing inclusivity and empower you to optimize your designs for every user.
By offering valuable insights into accessibility aspects like color contrast, color blindness considerations, screen reader accessibility and copy readability, these Figma plugins can reshape your design workflow and facilitate seamless integration of accessibility checks and annotations. So, let's dive in and explore their functionalities, and understand how they can enhance your design process!
Let's start with color contrast A11y contrast checker. This plugin examines the color contrast ratio of all visible text in a frame, and offers feedback on whether it meets the WCAG's (Web Content Accessibility Guidelines) AA and/or AAA compliance levels.
Why is color contrast important?
Low color contrast on text and UI elements can make it difficult for people, especially those with visual impairments or aging eyes, to read or distinguish between different elements of a design, leading to eye strain or headaches. By checking designs for color contrast, you can make sure that your designs are readable and accessible to a wide range of users.
Levels of compliance:
You may be wondering, which color contrast standard should I follow? The WCAG has three levels of conformance: A, AA and AAA — A being the easiest level to meet and AAA being the hardest. Typically, most websites aim for Level AA which is the middle level of compliance that works with most assistive technologies. Level AAA is the gold standard level for accessibility compliance and is often used by government sites.
How it works:
Once you select a frame to inspect, the plugin will generate a list of color contrast accessibility issues, if any. You can go over the issues one by one clicking on the “A” section of the list, and it will highlight the corresponding issue element on the frame.
You can also use the color sliders to adjust the text or background colors to meet the color contrast standards in real-time.
.gif)
Some shortcomings of this plugin current version though are:
Below are are few color contrast plugins that are are covering for these gaps.
.png)
The “Contrast” plugin also lets you quickly run a AA or AAA type contrast report on all text across a Figma frame at once. While its functionality is rather basic, it provides an accurate assessment of text over images, which most color contrast plugins are lacking.
In the example below, text over image which doesn’t meet the required ratio is indicated by the red highlight and the contrast range you can see on text hover.
When you need to check an individual component that may or may not be part of the frame, I prefer to use Stark color contrast plugin. Stark allows you to select one group or button and run a contrast check against the WCAG AA or AAA requirements, and provides accessible color suggestions to ensure your design meets the standards.
It also updates the report results in real-time if you select colors from the color picker or your reusable color tokens, which is very convenient for your workflow. Just click Enter once you selected a new value, and you will immediately see if it passes the color contrast requirement.
%20(1).gif)
Stark also provides Focus Order, Alt-Text Annotations, Vision Simulator, Alt-Text Annotations, and AI-generated suggestions for how to fix the accessibility issues in its pro version. But this post is about free accessibility plugin options, right? So let’s move on.
Color Blind plugin allows you to view your designs in the 8 different types of color vision deficiencies.
Why checking for color blindness is important?
Color blindness is a vision deficiency in which individuals have difficulty distinguishing between certain colors, usually red and green. It affects about 8% of men and 0.5% of women making it challenging for people with color blindness to perceive information that relies on color. Graphs, charts, and maps can be especially confusing.
How it works:
Color Blind plugin creates versions of your design that simulate what it would look like to a person with different types of color blindness. You can choose a specific type of color blindness or simulate them all.
Simulation results example:
In the example below, all the simulations versions have distinguishable colors between the charts bars, which means this chart passes color blindness check.
A11y plugin allows you to quickly annotate a design’s focus order for engineering hand-off.
Why annotating focus order is important?
Focus order is the path that keyboard and screen reader users take as they move through an interface. It is important that it is meaningful and logical, so that the users are less likely to get confused or frustrated when navigating through the interface via keyboard.
Generally, the focus order is left to right and top to bottom, but some layouts may be not that straightforward. In these instances, annotating your designs is essential to help your engineers accurately establish the tabbing order within your product.
How it works:
It’s pretty straightforward if you add focus order only. You add focus labels one by one by clicking on the interface element and and then the plugin “Add” button. You can easily rearrange focus order by dragging it around in the plugin window. The plugin also allows to create multiple focus order sets for different designs on the same page.
If you want to take it a step further, the plugin also lets you annotate screen reader details for interactive elements, like semantic HTML or ARIA role, and additional properties and control labels. Additionally, you can include a link to the component in your design system repository for developer hand-off.
Hemingway plugin allows you to assess the readability of your copy by scanning your text for instances of passive voice and complex phrasing.
Why checking copy for readability is important?
Clear and easily understood content is essential for everyone, especially for people with disabilities and non-native language users. According to the statistics, the average reading level of U.S. adults is eighth-grade, so the WCAG guidelines require content to be written at a lower secondary education level. Web users also tend to scan through web pages, only reading around 20% of the page in an F-pattern. By making your writing more readable, you can help users quickly find the information they need, making for a better user experience.
How it works:
Simply choose a text element and activate the plugin. It will apply Hemingway plugin rules around adverbs, passive voice, complex phrases, and hard sentences. The plugin will also check word count, character count, and assess reading level using the automated readability index.
The tools discussed in this blog post are just a fraction of the work required to achieve accessibility in product design. Hopefully they provide a starting point and assist you in developing your own comprehensive toolset to complement your design process and prioritize accessibility.
Written by
Tamara Runtsova