A quick look at accessibility in Figma Sites

Earlier today, as I was heading out to walk the dogs, and Mel was getting home, she excitedly said, “Figma Sites!” And then the dogs pulled me out the door. I passively wondered how they handled accessibility. Later, I saw this post from Adrian Roselli, Do Not Publish Your Designs on the Web with Figma Sites… But I wanted more details, so I decided to check it out too.

Testing the demo site

Starting on config.new, I got a feel for the accessibility by tabbing. I expected to move to the top navigation, but that was skipped (turns out it’s at the end of the page). I moved through the page, focusing on a sticker that says “locally grown”… but I can’t interact with it. With a mouse, I can move it. There is no accessible text labeling the image. Other images do have alt text though, so it’s not everything.

Moving on, I can focus on the “Explore playground file” button, but again, I can’t interact with it. Hitting enter should open the Figma link, like clicking it does. The button’s accessible text is also duplicated, “Explore playground file Explore playground file.”

Further on, there’s a gallery, but I can’t focus on the arrows with my keyboard. I can focus the current image, but hitting enter does nothing.

Next, since I’ve noticed a lot of motion, let’s see what happens if I’d prefer less of that. Well… nothing. The text and images still animate in, and the button labels shift. If I were sensitive to vertigo, this would probably be a bad time.

One last quick test. I use a bookmarklet to detect heading levels. There should be only one h1 per page, and the rest cascade from there. When viewed alone, the headings should give a good outline of the page. On this page, that’s not the case. The headings are used to style text, not semantically.

1. Everything we launched at Config 2025
1. Five new ways to streamline your process and raise the bar for craft and creative expression.
1. Express yourself with Figma Draw.
1. Add personality to your designs with enhanced vector editing, new brushes, fills, and more.
1. Griddy up! Rein in your designs with a grid.
1. Design flexible layouts with a grid that adapts seamlessly to your designs.
  2. “We don’t see design as a static artifact anymore. The apps we use every day need to keep pace with our changing needs.”
1. Everyone’s a brand champion with Figma Buzz.
1. Now the whole team can quickly create, edit, and ship on-brand assets.
1. Set your Sites on something new.
1. Design and publish fully responsive, custom websites—all within Figma.
  2. Prompt any possibility with Figma Make.
  2. Your prompt-to-code playground for pushing your ideas further.
  2. Get the details on new releases
    3. Figma Draw
    3. Grid
    3. Figma Buzz
    3. Figma Sites
    3. Figma Make
    3. Release Notes

Building my own site

I created a new site, and the process was easy. It reminds me of the page creation in Gutenberg, complete with picking a pattern first. I picked a resume template since I’ve been looking at my resume a lot lately (psst, I’m looking for work). The template was nice and simple, and I was able to easily start editing the content. I don’t create a lot of Figmas, so it took a little trial and error—and so much clicking—to edit the content, but the auto-layout made adding and removing sections easy. I also like that it included the components used, so you could easily change all instances of an object.

Unfortunately, the link issues exist on this site too. Except on the chip-links, I think because they don’t have an interaction on hover (which is also not good, I can’t just add an underline to the text?). And for some reason, the links don’t work with a mouse, either.

I was able to add headings, but it’s hidden under the “Accessibility > Tags” option. It was also hard to know which items I had already updated once I found that (something like the link icon would be nice).

The responsive behavior feels a little abrupt; it switches at 730px, rather than gradually expanding. And my headings did not carry over to the mobile version (except one).

Conclusion

Figma Sites was just announced today and is still in beta. The core idea is promising, especially since many designers are already comfortable working in Figma. That makes it all the more important for accessibility to be natively supported. There are other issues with the site I created that make this feel like it’s not as polished as it should be. I’m sure Figma will keep iterating, and hopefully all the feedback about accessibility will be taken to heart.