axe for Designers

Your one-stop accessibility solution!

by Deque Systems

users
24K
likes
923
saves
5K
comments
31
FreeWorks inFigma Design
Price
Free
Latest version
v20 · Jun 17, 2024
First published
Mar 15, 2022
Publisher
Deque Systems
Features

What axe for Designers does

Summarised from Deque Systems's description on the Figma Community.

  • Introducing axe for Designers' features

    Ensure your designs meet WCAG compliance standards with a single click.

  • Automated Accessibility Scan

    Receive real-time suggestions for design improvements for color contrast, text readability, and more, making your designs inclusive for all users.

  • Color Contrast Checker

    Looking for a WCAG color contrast checker? Easily assess contrast ratios and ensure your designs adhere to AA or AAA requirements.

  • Touch Targets Size

    Confirm that touch targets in your designs are user-friendly and accessible to everyone.

  • Inappropriate or Missing Headings Hierarchies

    Run checks on your designs to ensure heading hierarchies are appropriately structured for accessibility.

  • Focus Order

    Optimize user navigation and enhance accessibility in your designs with the axe for Designers' Focus Order feature, ensuring a seamless experience…

  • Dashboard View

    Save and share reports seamlessly.

  • Users Testimonials

    “This plugin is the best thing to happen to Figma. It's awesome!

On this page
Overview

About axe for Designers

axe for Designers is a free Figma plugin published by Deque Systems in 2022. It works in Figma Design and has 24,047 users and 923 likes on the Figma Community. It ranks #17 in Accessibility on our lists.

In the developer's words

axe for Designers: A Free Accessibility Plugin

Are you exhausted from dealing with endless back and forth with developers, messy handouts, and accessibility issues in your designs? Introducing axe for Designers, a Figma accessibility plugin supported by AI/ML, developed by Deque, a market leader in digital accessibility.

With features like A11y Scan (previously auto scan), wcag Color Contrast Checker, Focus Order, Annotations, and more, you can quickly and easily identify any accessibility issues before your design goes into production. And if you're already in the middle of a project, our tool can help you analyze and fix accessibility issues that have cropped up.

Best of all, you can use our Figma accessibility plugin for free!!

Introducing axe for Designers' features

Ensure your designs meet WCAG compliance standards with a single click. Make design-to-dev handoffs more effective by seamlessly bridging the gap between design and development with the axe for Designers. Consider integrating this website accessibility plugin to ensure all users can access your content effortlessly.

Annotations: Communicate your design intent effectively to developers by adding explicit accessibility annotations. Refine your design intent effortlessly with the axe for Designers' Edit Annotation feature, ensuring precise communication and reducing rework. Tags for developers facilitate smoother handoffs.

• Extensive Annotation Stamps: Access a comprehensive set of annotation stamps, including automated developer tags, with short recommendations and detailed documentation for developers.

• AI/ML Driven Auto-annotations: Explore the auto-annotation feature, which automatically scans and annotates form controls like buttons, radio buttons, checkboxes, and labels.

Automated Accessibility Scan:

Receive real-time suggestions for design improvements for color contrast, text readability, and more, making your designs inclusive for all users.

Color Contrast Checker:

Looking for a WCAG color contrast checker? Easily assess contrast ratios and ensure your designs adhere to AA or AAA requirements. Explore accessible color palettes to enhance your design's inclusivity.

Touch Targets Size:

Confirm that touch targets in your designs are user-friendly and accessible to everyone.

Inappropriate or Missing Headings Hierarchies:

Run checks on your designs to ensure heading hierarchies are appropriately structured for accessibility.

Focus Order:

Optimize user navigation and enhance accessibility in your designs with the axe for Designers' Focus Order feature, ensuring a seamless experience for all.

Dashboard View:

Save and share reports seamlessly. Access your dashboard directly from the plugin or log in to dashboard to view reports, product documentation, and other accessible design resources.

Users Testimonials:

“This plugin is the best thing to happen to Figma. It's awesome! I've been using Axe for over 5 years now and it's so great to be able to get even a fraction of that suite inside of Figma. Keep up the great work!”

- Bryce Watson, Head of Design, Yoke

"Thank you so much for making this! I was used to baking in accessibility annotations as part of a design system, but this is a more powerful way to annotate for accessibility. The plugin explains more about each "type" of annotation, enabling designers to learn more as they work and facilitating more productive conversations between designers and engineers."

- Sarah Bonville, Senior Product Designer, Accessibility. Khan Academy

“My experience with the Axe for Designers plugin has been great. It helps designers quickly check and annotate designs, allowing for more accurate accessibility details earlier in the design and development processes.”

- Adam Wertel UI/UX Lead, Spreedly

Learn more !

Changelog

What's new

Version 20 · released Jun 17, 2024

  • Minor bug fixes
Trust

Permissions and privacy

Network access

axe for Designers can only connect to the 7 domains declared in its manifest: axed-backend.dequelabs.com, axed.dequelabs.com, wss://axed-backend.dequelabs.com, s3-alpha.figma.com, fonts.googleapis.com, fonts.gstatic.com and api-js.mixpanel.com.

  • axed-backend.dequelabs.com
  • axed.dequelabs.com
  • wss://axed-backend.dequelabs.com
  • s3-alpha.figma.com
  • fonts.googleapis.com
  • fonts.gstatic.com
  • api-js.mixpanel.com

Extra permissions

  • Reads your Figma name and avatar

Read from the plugin's published manifest.

Rankings

Where axe for Designers ranks

Compare

axe for Designers alternatives

  1. 1

    Stark

    by Stark

    597K users10KFree

    Fix Color Contrast and Typography issues and add WCAG annotations for a smooth design to dev handoff

  2. 2

    Contrast

    by Alex Carr

    527K users8.5KFree

    Quickly check and scan for contrast issues on gradients, images, blends, and fills.

  3. 3

    A11y

    by Kelly Gorr

    322K users4.8KFree

    Text color accessibility

  4. 4

    Able

    by Sondre Kvam

    144K users2.6KFree
  5. 5

    Color Blind

    by Sam Mason de Caires

    110K users1.9KFree
  6. 96K users829Free + $5/mo upgrade

    Color Palettes that meet WCAG Guidelines and Operations (tailored for individuals)

FAQ

axe for Designers FAQ

What does axe for Designers do?

Your one-stop accessibility solution. It's a Figma plugin by Deque Systems that runs in Figma Design.

Is axe for Designers free?

Yes. axe for Designers is free to install and run from the Figma Community, with no paid tier listed.

Is axe for Designers safe to use?

Figma plugins can only reach the internet through domains listed in their manifest. axe for Designers can only connect to the 7 domains declared in its manifest: axed-backend.dequelabs.com, axed.dequelabs.com, wss://axed-backend.dequelabs.com, s3-alpha.figma.com, fonts.googleapis.com, fonts.gstatic.com and api-js.mixpanel.com. As with any plugin, check the developer's privacy policy before using it on client work.

How do I install axe for Designers?

Open it on the Figma Community, or search for it in the Actions menu (Cmd/Ctrl + K) inside any file you can edit. See how to install Figma plugins.

What are the best alternatives to axe for Designers?

By user count, the closest alternatives are Stark, Contrast by Alex Carr and A11y. Compare all of them on the best Figma plugins for accessibility.

For developers

Built this plugin?

Use this page as a landing page for axe for Designers: link to it from your site, README or launch posts, or add a badge. Pick a style and copy the code.

axe for Designers on figmaplugins.co

Style

Label

Size

Code

<a href="https://figmaplugins.co/plugins/axe-for-designers-a-free-accessibility-plugin/" target="_blank" rel="noopener"><img src="https://figmaplugins.co/badges/featured-dark.svg" alt="axe for Designers on figmaplugins.co" width="220" height="48"></a>

Want it featured on figmaplugins.co? Submit it for review