❌

Reading view

There are new articles available, click to refresh the page.
πŸ”–

Do Not Publish Your Designs on the Web with Figma Sites…

βœ‡Adrian Roselli
By: Adrian Roselli

…Unless you want to fail all the WCAGs, create litigation risk, close off opportunities in Europe, engage in reputational harm, and oh yeah, throw up barriers to your customers and users.

What am I talking about? Figma announced Figma Sites, letting you publish your Figma designs directly to the web. Here’s the video demonstration from this morning:

YouTube: Config 2025: Figma product launch keynote (Dylan Field, CEO & Co-founder, Figma), 1:03:33

Or you can read the blog post announcing it, which opens with this:

Today, we’re launching Figma Sites, an all-in-one tool for you to design and build custom, responsive websites. Here, we share how you can go from design to production in the most efficientβ€”and expressiveβ€”ways.

That’s impressive! It’s like Dreamweaver has been resurrected from 1997, except now with mouse parallax!

Tell Me More

That opening was brusque, yeah. The announcement was this morning and I have gaming tonight, so how could I have possibly spent enough time evaluating all the inputs, outputs, and potentials of a product that I have only just heard about? Easy β€” I looked at the demo sites Figma linked from the post.

If you think this is the part where I do a detailed WCAG review and also wade into bugs and barriers and general failures that are outside WCAG, you’d be wrong. I have no interest in giving Figma free labor. Instead, I am going to do the most basic possible test that anybody at Figma could have done.

Config.new

The Figma post describes Config.new as β€œBalancing functionality and interactivity.” I popped open Config.new and found that it also balances 209 WCAG violations according to the free axe plug-in.

Axe results for the Config.new site.
Axe DevTools 4.4.2 showing 210 total issues, 169 of which need review. 33 are critical, 7 are serious, none are moderate, and 1 is minor. From the issues list, 3 ARIA widgets are missing accessible names, 56 elements have poor contrast, 1 ID value is not unique, 1 frame lacks an accName, 33 images lack alt text, and more things that scroll off the screen.

ARC Toolkit found 203.

ARC results for the Config.new site.
ARC Toolkit 5.7.9 found 203 errors and 67 alerts. 114 cases have a disallowed ARIA attribute, 51 have insufficient contrast, 31 images without alt text, a frame with no name, 2 non-interactive elements in the tab order, 3 cases of no link text, and more issues not in the screen shot.

Equal Access Accessibility Checker found 219.

EAAC results for the Config.new site.
EAAC 4.0.4 found 219 errors and 184 warnings. The only issues we can see in the screen shot are missing widget roles.

Practice-Type.com

The Figma post describes the Practice type specimen site as β€œPushing the limits of expression.” I popped open Practice-type.com/ and found that it also pushes 107 WCAG violations according to the free axe plug-in.

Axe results for the Practical-type.com site.
Axe DevTools 4.4.2 showing 107 total issues, 78 of which need review. 28 are critical, none are serious, none are moderate, and 1 is minor. From the issues list, one ID attribute is not unique, 28 images have no alternative text, the page has no method to bypass blocks, and 77 elements lack sufficient contrast.

ARC Toolkit found 84.

ARC results for the Practical-type.com site.
ARC Toolkit 5.7.9 found 84 errors and 30 alerts. 54 items have insufficient contrast, 23 items lack alt text, and 7 non-interactive elements are in the tab order. The warnings include no headings, 7 duplicate IDs, 9 missing image roles, an absent navigation landmark, and other stuff scrolled out of view.

Equal Access Accessibility Checker found 48.

EAAC results for the Practical-type.com site.
EAAC 4.0.4 found 48 errors and 156 warnings. The only issues we can see in the screen shot are missing widget roles and no way to bypass blocks of content.

Wrap-up

Listen, I don’t mean to be the party-pooper here. I just happen to be really good at it. I am demonstrably better at it than the Figma team was at running even the barest WCAG checks against their flagship demos for its Figma Sites product launch.

I am also better at being embarrassed at my behavior.

❌