{"id":8876,"date":"2025-05-17T17:48:46","date_gmt":"2025-05-17T15:48:46","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog?p=8876"},"modified":"2025-05-17T17:48:52","modified_gmt":"2025-05-17T15:48:52","slug":"figma-sites-a-promising-start-still-not-accessible","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/en\/user-experience\/figma-sites-a-promising-start-still-not-accessible","title":{"rendered":"Figma Sites: A Promising Start\u2026 Still Not Accessible?"},"content":{"rendered":"\n<p>On May 8th, <a href=\"https:\/\/www.youtube.com\/watch?v=HXVlgVWI7tc&amp;t=12s\">Figma unveiled<\/a> several new features, including <strong>Figma Sites<\/strong>, a tool that promises to revolutionize website creation directly within their design interface. Alongside it, <strong>Figma Make<\/strong> (AI &amp; Code), <strong>Figma Buzz<\/strong> (a community component feature similar to Canva), and <strong>Figma Draw<\/strong> (vector drawing) add new strings to the platform\u2019s bow.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Yet, as a designer attentive to digital accessibility, one thing becomes obvious within minutes of testing: while the intent is promising, the foundation of accessibility remains shaky, if not completely overlooked. Sure, Figma Sites already lets you use some semantic tags like <code>&lt;header&gt;<\/code>, <code>&lt;footer&gt;<\/code>, <code>&lt;section&gt;<\/code>, and heading levels (<code>h1<\/code>, <code>h2<\/code>, <code>h3<\/code>). But many other essential elements are conspicuously absent:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>No list tags (<code>ul<\/code>, <code>ol<\/code>, <code>li<\/code>),<\/li>\n\n\n\n<li>No table support (<code>table<\/code>, <code>thead<\/code>, <code>th<\/code>, <code>td<\/code>),<\/li>\n\n\n\n<li>No custom attributes like <code>hreflang<\/code>, <code>lang<\/code>, <code>dir<\/code>, etc.,<\/li>\n\n\n\n<li>And most critically: <strong>no forms<\/strong> (<code>form<\/code>, <code>input<\/code>, <code>label<\/code>, <code>button<\/code>, etc.).<\/li>\n<\/ul>\n\n\n\n<p>ARIA attributes? Nowhere to be found.<\/p>\n\n\n\n<p>To <a href=\"https:\/\/duck-salty-shy.figma.site\/\" title=\"\">conduct my test<\/a>, I opened one of the examples provided by Figma Sites and used every tool available to try and make the output at least slightly less inaccessible.<\/p>\n\n\n\n<p>This article isn\u2019t meant to harshly criticize a tool still in beta, but rather to point out essential priorities. Because while time is being invested in spinning effects and cosmetic animations, <strong>access to information, the very foundation of the web, is being neglected<\/strong>. And that\u2019s a shame. It would be unfortunate for such a promising tool to start off on the wrong foot by leaving accessibility behind.<\/p>\n\n\n\n<p>So here\u2019s a <strong>critical yet constructive<\/strong> take on Figma Sites, with one clear goal in mind: <strong>helping the platform evolve in the right direction: the inclusive one.<\/strong><\/p>\n\n\n\n<div class=\"wp-block-group tdm\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Table of Contents<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><a href=\"#what-is-access\" title=\"\">The Importance of Accessibility in Web Design<\/a><\/li>\n\n\n\n<li><a href=\"#today\" title=\"\">What Figma Sites Offers Today<\/a><\/li>\n\n\n\n<li><a href=\"#gaps\" title=\"\">The Most Obvious Gap In Figma Sites<\/a><\/li>\n\n\n\n<li><a href=\"#priorities\" title=\"\">When Aesthetics Take Priorities Over Essentials<\/a><\/li>\n\n\n\n<li><a href=\"#suggestions\" title=\"\">Figma, You\u2019re On to Something: Concrete Suggestions<\/a><\/li>\n<\/ol>\n<\/div><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-default\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-is-access\">The Importance of Accessibility in Web Design<\/h2>\n\n\n\n<p>But before diving deeper into Figma Sites, let\u2019s take a step back and revisit some foundational principles of modern design, and accessibility.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Why Accessibility Is Not Optional<\/h3>\n\n\n\n<p>Accessibility isn\u2019t a \u201cfeature\u201d you enable later. It\u2019s a <strong>core principle of the web<\/strong>, just like mobile compatibility, performance, or security. Ignoring it means <strong>denying a portion of the population access to information or services<\/strong>, in other words, stripping away individual autonomy. Whether intentional or not, it contributes to deepening inequality.<\/p>\n\n\n\n<p>From a legal perspective, many countries, including those in the European Union, now require digital accessibility standards for public services and businesses. <strong>The RGAA<\/strong>, <strong>RAWeb<\/strong>, <strong>WCAG<\/strong>, and the <strong>European Accessibility Act<\/strong> are no longer just recommendations. As of 2025, failing to comply with these requirements could even expose organizations to legal risk.<\/p>\n\n\n\n<p>But more importantly, <strong>accessibility is a matter of respect<\/strong>, respect for diverse needs, bodies, and minds. It is a tool for inclusion and opportunity. It\u2019s a <strong>moral obligation<\/strong>, not a technical burden.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">What Designers Expect from a \u201cModern\u201d Tool<\/h3>\n\n\n\n<p>A website creation tool in 2025 can no longer afford to overlook accessibility. What designers expect from a so-called <em>modern<\/em> tool isn\u2019t just a smooth interface or sleek onboarding with polished micro-interactions. It\u2019s the ability to build on <strong>solid foundations<\/strong>: semantic markup, accessible forms, coherent keyboard navigation, and visible, understandable labels.<\/p>\n\n\n\n<p>In short, a modern tool should <strong>encourage best practices<\/strong>, not cosmetic effects at the expense of usability.<\/p>\n\n\n\n<p>As designers, we create interfaces to allow human beings to access content, services, or products, not just to satisfy our artistic egos. And it\u2019s the tools we use that should lead by example.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The Benefits for Users<\/h3>\n\n\n\n<p>When a website is accessible, <strong>everyone benefits<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>People who are blind or visually impaired can navigate using a screen reader;<\/li>\n\n\n\n<li>People with motor disabilities can tab through interfaces with ease;<\/li>\n\n\n\n<li>Neurodivergent users access a clearer, more predictable experience;<\/li>\n\n\n\n<li>Older adults or less tech-savvy individuals find the site easier to read and navigate;<\/li>\n\n\n\n<li>And so on.<\/li>\n<\/ul>\n\n\n\n<p>More broadly, <strong>accessibility improves the experience for all users<\/strong>: well-considered contrast, clear structure, properly labeled forms, these are also major advantages for users who are in a rush, distracted, on mobile, or in noisy or unstable environments.<\/p>\n\n\n\n<p>And don\u2019t forget: it benefits <strong>you<\/strong> as well. As you age, you may lose some of your abilities. Thinking about accessibility now is an investment in your own future.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The Benefits for Businesses<\/h3>\n\n\n\n<p>Investing in accessibility isn\u2019t a waste of time, it\u2019s a <strong>performance booster<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>You reach a broader audience (an aging population, people with temporary disabilities, mobile users);<\/li>\n\n\n\n<li>You improve your <strong>SEO<\/strong>. Semantic tags and text alternatives are just as valuable to Google\u2014and to the AI systems that surface your content and services;<\/li>\n\n\n\n<li>You reduce <strong>maintenance costs<\/strong> by structuring your code and components more effectively;<\/li>\n\n\n\n<li>You strengthen your <strong>brand image<\/strong> by committing to a meaningful societal issue.<\/li>\n<\/ul>\n\n\n\n<p>In short: <strong>an accessible site is a more inclusive, clearer, more efficient, and more sustainable site<\/strong>.<br>Why miss out, when it&#8217;s a guaranteed edge over the competition?<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"today\">What Figma Sites Offers Today<\/h2>\n\n\n\n<p>Let\u2019s take a look at what Figma Sites currently offers in terms of accessibility, and the ground it still has to cover.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">A Semantic Foundation in Progress<\/h3>\n\n\n\n<p>The launch of Figma Sites introduces a long-awaited feature for designers: the ability to generate websites with an integrated HTML structure, without ever leaving the Figma ecosystem. In its current beta version, the tool allows the addition of certain semantic elements directly through the interface:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Structural tags such as <code>&lt;article&gt;<\/code>, <code>&lt;header&gt;<\/code>, <code>&lt;footer&gt;<\/code>, <code>&lt;section&gt;<\/code>, <code>&lt;aside&gt;<\/code>, <code>&lt;main&gt;<\/code>, <code>&lt;nav&gt;<\/code>, and <code>&lt;section&gt;<\/code> again;<\/li>\n\n\n\n<li>Heading levels from <code>h1<\/code> to <code>h6<\/code>;<\/li>\n\n\n\n<li>An <code>alt<\/code> attribute that is sometimes interpreted.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" width=\"373\" height=\"356\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2025\/05\/accessibility-options-figma-sites@2x.png\" alt=\"\" class=\"wp-image-8866\" style=\"width:218px;height:auto\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2025\/05\/accessibility-options-figma-sites@2x.png 373w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2025\/05\/accessibility-options-figma-sites@2x-300x286.png 300w\" sizes=\"(max-width: 373px) 100vw, 373px\" \/><figcaption class=\"wp-element-caption\">Semantics HTML that Figma offers under the <em>Accessibility<\/em> name. (why?)<\/figcaption><\/figure>\n<\/div>\n\n\n<p>This initiative is worth applauding, as it provides a <strong>first layer of content comprehension<\/strong> for assistive technologies, offering a slightly more responsible approach than a div soup (more on those missing pieces further down).<\/p>\n\n\n\n<p>What\u2019s unfortunate, though, is seeing this feature tucked away under <em>Accessibility<\/em>, when in fact it\u2019s <strong>the foundation of semantic web structure<\/strong>, which serves far more than just accessibility.<\/p>\n\n\n\n<p>HTML and CSS are so straightforward that many front-end developers today <strong>no longer learn the basics properly<\/strong>, leading to endless layers of <code>&lt;div&gt;<\/code> and missed opportunities for clarity and structure.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">What This Already Enables<\/h3>\n\n\n\n<p>With these initial tools, a designer can:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Visually and semantically structure a page;<\/li>\n\n\n\n<li>Define the main areas of the site (navigation, content, footer);<\/li>\n\n\n\n<li>Establish a clear content hierarchy using heading tags;<\/li>\n\n\n\n<li>Lay the groundwork for better indexing and accessibility on the web.<\/li>\n<\/ul>\n\n\n\n<p>In other words, <strong>Figma Sites goes beyond simple prototyping<\/strong>: it initiates the creation of websites that can be explored by real users, both human and machine. But that\u2019s still not enough.<\/p>\n\n\n\n<p>What does this suggest for the future? That <strong>Figma Sites is fertile ground<\/strong>, but still largely untilled when it comes to accessibility. The promise is there, but the implementation <strong>has yet to meet even the basic requirements of a web for all<\/strong>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"gaps\">The Most Obvious Gaps in Figma Sites (So Far)<\/h2>\n\n\n\n<p>Once the initial excitement wears off, a clear truth surfaces: <strong>accessibility is still far from being fully addressed<\/strong>. Many essential elements for navigation, interaction (not in Figma\u2019s animated sense), and content comprehension are still missing.<\/p>\n\n\n\n<p>While Figma Sites takes a welcome step toward HTML structuring, it\u2019s still <strong>far from sufficient<\/strong> when it comes to building truly accessible websites. Here\u2019s an overview of the main technical and functional shortcomings observed in this beta version.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">No Semantic Lists<\/h3>\n\n\n\n<p>IAt the moment, there is no way to structure a group of elements as a proper list (<code>&lt;ul&gt;<\/code>, <code>&lt;ol&gt;<\/code>, <code>&lt;li&gt;<\/code>) in a custom way. This prevents you from:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Conveying repetitive content clearly (services, steps, key points, etc.);<\/li>\n\n\n\n<li>Providing screen readers with information on the number of items or their order;<\/li>\n\n\n\n<li>Supporting smooth navigation for users relying on assistive technologies.<\/li>\n<\/ul>\n\n\n\n<p>This is a fundamental gap when it comes to readability, navigability, and content understanding.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" width=\"715\" height=\"575\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2025\/05\/image.png\" alt=\"\" class=\"wp-image-8864\" style=\"width:570px;height:auto\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2025\/05\/image.png 715w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2025\/05\/image-300x241.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2025\/05\/image-600x483.png 600w\" sizes=\"(max-width: 715px) 100vw, 715px\" \/><figcaption class=\"wp-element-caption\">If I want to make this list semantical in Figma, it&#8217;s impossible at the moment without sacrificing its visual aspect.<\/figcaption><\/figure>\n<\/div>\n\n\n<p>Sure, you can use Figma\u2019s basic text feature to auto-generate ordered or unordered lists. But you <strong>can\u2019t define that a group of logos is a list of logos<\/strong>, or that a group of navigation links is a list of links.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">No Tables for Data<\/h3>\n\n\n\n<p>There is currently no way to create structured tables (<code>&lt;table&gt;<\/code>, <code>&lt;thead&gt;<\/code>, <code>&lt;th&gt;<\/code>, <code>&lt;td&gt;<\/code>, etc.). As a result, it&#8217;s impossible to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Properly present numeric data, schedules, or comparisons;<\/li>\n\n\n\n<li>Provide the correct associations between header and data cells;<\/li>\n\n\n\n<li>Make this information understandable for assistive technologies.<\/li>\n<\/ul>\n\n\n\n<p>The information may appear <em>visually<\/em> structured, but it completely <strong>lacks semantic logic<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1862\" height=\"786\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2025\/05\/figma-sites-with-no-table-elements@2x.png\" alt=\"\" class=\"wp-image-8862\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2025\/05\/figma-sites-with-no-table-elements@2x.png 1862w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2025\/05\/figma-sites-with-no-table-elements@2x-300x127.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2025\/05\/figma-sites-with-no-table-elements@2x-600x253.png 600w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2025\/05\/figma-sites-with-no-table-elements@2x-768x324.png 768w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2025\/05\/figma-sites-with-no-table-elements@2x-1536x648.png 1536w\" sizes=\"(max-width: 1862px) 100vw, 1862px\" \/><figcaption class=\"wp-element-caption\">A selected element that should be a table cell (or a list item), but Figma doesn&#8217;t offer this option, yet.<\/figcaption><\/figure>\n<\/div>\n\n\n<p>Creating tables in Figma has always been somewhat of a challenge depending on the era (who remembers the pre\u2013auto-layout days? \ud83d\ude04). We\u2019re still in that same boat, but now with a <strong>technical and semantic problem<\/strong>.<\/p>\n\n\n\n<p>Perhaps the recently introduced <strong>Grid Layout<\/strong> could offer a solution in the near future.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Forms: The Big Missing Piece<\/h3>\n\n\n\n<p>The total absence of form components (<code>&lt;search&gt;<\/code>, <code>&lt;form&gt;<\/code>, <code>&lt;label&gt;<\/code>, <code>&lt;input&gt;<\/code>, <code>&lt;textarea&gt;<\/code>, <code>&lt;button&gt;<\/code>, <code>&lt;fieldset&gt;<\/code>, <code>&lt;legend&gt;<\/code>, etc.) is a major obstacle to meaningful interaction:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>There\u2019s no way to create an accessible contact form;<\/li>\n\n\n\n<li>No structure to associate fields with their labels;<\/li>\n\n\n\n<li>No handling of focus, error states, or user feedback.<\/li>\n<\/ul>\n\n\n\n<p>You simply <strong>cannot build a functional website without accessible forms<\/strong>.<br>Even though introducing forms raises other important questions\u2014like \u201cWhere is the submitted data stored?\u201d or \u201cWhich service handles the data?\u201d. Figma will have to address these challenges to <strong>remain competitive<\/strong>.<\/p>\n\n\n\n<p>By the way, if you&#8217;re looking to build better forms, I\u2019ve created a <a href=\"https:\/\/geoffreycrofte.com\/book\/web-forms-costly-mistakes-you-want-to-avoid\/en\/\"><strong>checklist and a book<\/strong> on web forms<\/a> just for that.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">No Support for ARIA Attributes<\/h3>\n\n\n\n<p>ARIA attributes (roles, states, properties) are essential for <strong>enriching semantic meaning<\/strong>, especially when native HTML doesn\u2019t go far enough.<br>As of now, Figma Sites offers:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>No way to assign <code>role<\/code> or ARIA attributes to custom elements;<\/li>\n\n\n\n<li>No dynamic landmarks for screen readers;<\/li>\n\n\n\n<li>No way to <strong>hide decorative or redundant content<\/strong> from assistive technologies.<\/li>\n<\/ul>\n\n\n\n<p>These are fundamental tools for making complex or custom interfaces usable for all.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" width=\"451\" height=\"241\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2025\/05\/aria-label-figma-sites@2x.png\" alt=\"\" class=\"wp-image-8860\" style=\"width:236px;height:auto\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2025\/05\/aria-label-figma-sites@2x.png 451w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2025\/05\/aria-label-figma-sites@2x-300x160.png 300w\" sizes=\"(max-width: 451px) 100vw, 451px\" \/><figcaption class=\"wp-element-caption\">The aria-label field found in a demo component<\/figcaption><\/figure>\n<\/div>\n\n\n<p>This is a <strong>critical omission<\/strong> for complex components like menus, tabs, accordions, or modals.<br>That said, I did notice an ARIA label on one of the demo components, though I have no idea how it got there, or how to add more like it.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">No Keyboard Focus Management<\/h3>\n\n\n\n<p><strong>Keyboard focus is one of the most fundamental aspects of accessibility<\/strong> when navigating without a mouse. Users with motor or visual impairments often rely entirely on keyboard-like navigation tools and never use a mouse.<\/p>\n\n\n\n<p>The keyboard equivalent is pressing the <strong>Tab<\/strong> key to move focus to the next element on the page, or <strong>Shift + Tab<\/strong> to go backward.<br>To know where you are, it&#8217;s essential to <strong>visually highlight the focused element<\/strong>, typically with a <strong>focus ring<\/strong> or similar indicator.<\/p>\n\n\n\n<p>Without this, users are essentially navigating blind, and that\u2019s a major usability issue.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" width=\"258\" height=\"601\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2025\/05\/focus-effect-figma-sites-suggestion@2x.png\" alt=\"\" class=\"wp-image-8858\" style=\"width:145px;height:auto\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2025\/05\/focus-effect-figma-sites-suggestion@2x.png 258w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2025\/05\/focus-effect-figma-sites-suggestion@2x-129x300.png 129w\" sizes=\"(max-width: 258px) 100vw, 258px\" \/><figcaption class=\"wp-element-caption\">My proposal to add a &#8220;Focus effect&#8221;<\/figcaption><\/figure>\n<\/div>\n\n\n<p>However, as of today:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>There is <strong>no way to manage tab order<\/strong> (which is necessary, since Figma places <code>position: fixed<\/code> elements at the end of the HTML code);<\/li>\n\n\n\n<li>There\u2019s <strong>no visible focus state<\/strong> (focus ring or equivalent);<\/li>\n\n\n\n<li>There\u2019s <strong>no guarantee that components are navigable without a mouse<\/strong>, as many so-called &#8220;links&#8221; are actually <code>&lt;div><\/code> elements with a <code>role=\"link\"<\/code> and an <code>href<\/code>, combined with an <code>onclick<\/code> event.<br><em>(For non-technical readers: these are non-semantic elements, not focusable, and not keyboard-activatable.)<\/em><\/li>\n<\/ul>\n\n\n\n<p>This makes <strong>keyboard use highly unreliable, or even impossible<\/strong> for many users relying on assistive technologies.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Duplicate Page Titles and Heading Issues<\/h3>\n\n\n\n<p>Another issue is the <strong>lack of control over heading tags<\/strong>, which can appear in illogical order (e.g., an <code>h1<\/code> followed by an <code>h3<\/code> without an <code>h2<\/code>), as well as <strong>page titles<\/strong> (the tab title), which should always be unique for clarity and navigation.<\/p>\n\n\n\n<p>These problems impact:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Content hierarchy<\/strong>;<\/li>\n\n\n\n<li><strong>Overall page comprehension<\/strong>;<\/li>\n\n\n\n<li><strong>Navigation by headings<\/strong>, which is heavily used by screen reader users;<\/li>\n\n\n\n<li>And the ability to <strong>understand the page\u2019s purpose<\/strong> at a glance.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" width=\"600\" height=\"435\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2025\/05\/report-issue-publish-panel-figma-website@2x-600x435.png\" alt=\"Le panneau de publication de Figma, avec une ligne Issues, d\u00e9montrant un affichage de 8 erreurs d'accessibilit\u00e9 trouv\u00e9es dans le document \u00e0 publier.\" class=\"wp-image-8852\" style=\"width:435px;height:auto\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2025\/05\/report-issue-publish-panel-figma-website@2x-600x435.png 600w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2025\/05\/report-issue-publish-panel-figma-website@2x-300x217.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2025\/05\/report-issue-publish-panel-figma-website@2x-768x557.png 768w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2025\/05\/report-issue-publish-panel-figma-website@2x.png 818w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><figcaption class=\"wp-element-caption\">An idea of how accessibility issues could be displayed<\/figcaption><\/figure>\n<\/div>\n\n\n<p>This aspect may go beyond the usual list of missing features, but it&#8217;s something <strong><a href=\"https:\/\/webflow.grsm.io\/geoffreycrofte4796\">Webflow<\/a> handles well<\/strong> in its pre-publish audit, which Figma seems to be drawing inspiration from.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Limited Visibility of HTML Structure<\/h3>\n\n\n\n<p>As it stands, the Figma Sites interface <strong>doesn\u2019t allow for an easy overview of which HTML tags are being used<\/strong>. You have to click on each individual element to see its semantic nature\u2014there\u2019s no global view.<\/p>\n\n\n\n<p>This makes it difficult to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Quickly verify structural hierarchy;<\/li>\n\n\n\n<li>Conduct an accessibility audit;<\/li>\n\n\n\n<li>Ensure consistency across components.<\/li>\n<\/ul>\n\n\n\n<p>Worse still, it increases the risk of losing accessibility efforts <strong>in a sea of non-semantic elements<\/strong>.<\/p>\n\n\n\n<p>Here\u2019s an idea <strong>strongly inspired by how WordPress displays content structure<\/strong>:<br>Highlight semantic elements visually within the layer tree or canvas.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" width=\"456\" height=\"432\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2025\/05\/role-on-layers-figma-sites@2x.png\" alt=\"Une liste de calques sur Figma, le nom et type de calque se trouve \u00e0 gauche. Un petit encadr\u00e9 avec le type s\u00e9mantique se trouve \u00e0 droite de chaque ligne.\" class=\"wp-image-8850\" style=\"width:241px;height:auto\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2025\/05\/role-on-layers-figma-sites@2x.png 456w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2025\/05\/role-on-layers-figma-sites@2x-300x284.png 300w\" sizes=\"(max-width: 456px) 100vw, 456px\" \/><\/figure>\n<\/div>\n\n\n<p>That way, accessibility-related data could also be surfaced <strong>directly through the visual layer interface<\/strong>, making it easier to build responsibly.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"priorities\">When Aesthetics Take Priority Over Essentials<\/h2>\n\n\n\n<p>Tell me you ignored your accessibility experts without telling me you ignored your accessibility experts.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Polished Visual Effects\u2026 But Purely Cosmetic<\/h3>\n\n\n\n<p>From the very first moments using Figma Sites, one thing becomes clear: <strong>the attention given to visual effects is inversely proportional to the attention paid to essential accessibility<\/strong>.<br>Silky transitions, spinning components during loading, micro-animations, you can tell that <strong>a great deal of effort went into crafting visual flair<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" width=\"569\" height=\"600\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2025\/05\/interactions-figma-site-may-2025@2x-569x600.png\" alt=\"\" class=\"wp-image-8854\" style=\"width:374px;height:auto\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2025\/05\/interactions-figma-site-may-2025@2x-569x600.png 569w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2025\/05\/interactions-figma-site-may-2025@2x-284x300.png 284w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2025\/05\/interactions-figma-site-may-2025@2x.png 677w\" sizes=\"(max-width: 569px) 100vw, 569px\" \/><figcaption class=\"wp-element-caption\">Le menu des &#8220;interactions&#8221; affiche 10 types, dont 2 seulement sont des interactions\/effets souhait\u00e9s par les utilisateurs.<\/figcaption><\/figure>\n<\/div>\n\n\n<p>But let\u2019s ask a simple question: <strong>what\u2019s the point of all these animations if the content isn\u2019t accessible?<\/strong><br>These animations, let\u2019s be honest, they aren\u2019t \u201cinteractions\u201d, aim to convey a sense of energy or \u201cmodernity,\u201d but they don\u2019t meet any <strong>real functional or universal need<\/strong>.<\/p>\n\n\n\n<p>True interaction patterns like <strong>\u201chover effects\u201d<\/strong> and <strong>\u201cpress effects\u201d<\/strong>, those triggered by the user, are a good starting point.<br>What\u2019s missing? Just a proper <strong>\u201cfocus effect\u201d<\/strong> to round out the set of interactions that actually support usability.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u201cInteractions\u201d That Aren\u2019t Actual Interactions<\/h3>\n\n\n\n<p>Another concerning trend is the use of the term \u201cinteraction\u201d to describe what are, in reality\u2026 entrance animations, scroll effects, or spinning elements.<br>These features may be visually appealing at first, but they come with several problems:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>They <strong>slow down or temporarily hide content<\/strong>, which is particularly disruptive for people with cognitive impairments or attention disorders<\/li>\n\n\n\n<li>They <strong>don\u2019t serve any functional purpose<\/strong> (they trigger no real action)<\/li>\n\n\n\n<li>They <strong>interfere with navigation<\/strong> if poorly implemented \u2014 and too often, they are<\/li>\n<\/ul>\n\n\n\n<p>It\u2019s worth repeating: accessibility is also about <strong>removing unnecessary distractions<\/strong>.<br>An effective interface <strong>does not hide information behind choreography<\/strong>.<\/p>\n\n\n\n<p>Another idea while we are on this: modern browsers offer APIs that allow websites to detect if users prefer reduced motion.<br>Figma should absolutely use this capability to <strong>limit animations when users have expressed that preference<\/strong>.<\/p>\n\n\n\n<p>You can find more insights on this in my <strong><a href=\"https:\/\/geoffreycrofte.com\/book\/what-designers-need-to-know-about-accessibility\/en\/\">accessibility checklist and book for designers<\/a><\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Priorities That Raise Questions<\/h3>\n\n\n\n<p>The real issue isn\u2019t the presence of animations, it\u2019s <strong>what their prioritization says about the product strategy<\/strong>.<\/p>\n\n\n\n<p>Time and effort have gone into refining visual effects meant for a <strong>small percentage of users<\/strong> who are highly comfortable with visual interfaces, in calm, ideal, connected environments.<\/p>\n\n\n\n<p>Meanwhile, <strong>very little has been done<\/strong> for the 20% of the global population living with disabilities, who are waiting for the basics: readable content, keyboard navigation, semantic tags, ARIA roles.<\/p>\n\n\n\n<p>You might say it\u2019s just marketing logic, it\u2019s easier to sell animations than to sell human-centered benefits. But if that\u2019s truly the case, perhaps what\u2019s really missing is <strong>a broader education on inclusion<\/strong> and how accessibility <strong>benefits everyone<\/strong>, not just people with disabilities. \ud83d\ude09<\/p>\n\n\n\n<p>Maybe some believe it\u2019s harder to sell accessibility to funders? But let\u2019s not insult their intelligence, suggesting that animations are more useful than access to information feels like a slap in the face. Accessibility is not a luxury to be bolted on later. It is the foundation of the web, the very layer we should all be building on.<\/p>\n\n\n\n<p>The problem here isn\u2019t the presence of animations. The problem is that <strong>the fundamentals were skipped<\/strong>. Accessibility is not a plugin or a \u201cpro feature.\u201d It\u2019s the base of a <strong>responsible, sustainable, and truly useful product<\/strong>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"suggestions\">Figma, You\u2019re On to Something: Concrete Suggestions<\/h2>\n\n\n\n<p>It\u2019s time to start thinking about a more serious roadmap for accessibility. The foundation is already there it just needs to be extended and reinforced.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">A Base Exists, But Key Building Blocks Are Missing<\/h3>\n\n\n\n<p>Figma Sites has laid down a semantic foundation, but it\u2019s still incomplete.<br>Here\u2019s a list of essential elements to include in the short to medium term to unlock <strong>real accessibility potential<\/strong>:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Structural HTML Tags to Add<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Lists<\/strong>: <code>&lt;ul><\/code>, <code>&lt;ol><\/code>, <code>&lt;li><\/code><\/li>\n\n\n\n<li><strong>Tables<\/strong>: <code>&lt;table><\/code>, <code>&lt;thead><\/code>, <code>&lt;tbody><\/code>, <code>&lt;tr><\/code>, <code>&lt;th><\/code>, <code>&lt;td><\/code><\/li>\n\n\n\n<li><strong>Forms<\/strong>: <code>&lt;form><\/code>, <code>&lt;label><\/code>, <code>&lt;input><\/code>, <code>&lt;textarea><\/code>, <code>&lt;select><\/code>, <code>&lt;button><\/code>, <code>&lt;fieldset><\/code>, <code>&lt;legend><\/code><\/li>\n\n\n\n<li><strong>Internal Anchors<\/strong>: <code>&lt;a href=\"\"><\/code> currently, in-page anchors are rendered as links without <code>href<\/code>, making them <strong>inaccessible by keyboard<\/strong>.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Attributes (ARIA) and Enriched Semantics<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The <code>alt<\/code> attribute is available in Figma, but <strong>is not included in the output code<\/strong>, especially for SVGs (which should not use <code>alt<\/code> but instead an accessible name or text alternative)<\/li>\n\n\n\n<li><code>role<\/code> (e.g., <code>role=\"navigation\"<\/code> by default for <code>&lt;nav><\/code>, <code>role=\"dialog\"<\/code>, etc.)<\/li>\n\n\n\n<li><code>aria-label<\/code> (to name different navigation sections), <code>aria-labelledby<\/code>, <code>aria-describedby<\/code><\/li>\n\n\n\n<li><code>aria-hidden<\/code>, <code>aria-expanded<\/code>, <code>aria-controls<\/code>, <code>aria-live<\/code><\/li>\n\n\n\n<li><code>tabindex<\/code>, <code>aria-current<\/code> (to mark the current page in a site), <code>aria-disabled<\/code><\/li>\n<\/ul>\n\n\n\n<p>Implementing these would go beyond raw HTML tags and allow for <strong>real dialogue between the interface and assistive technologies<\/strong>, making Figma Sites a much more inclusive and future-ready tool.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">A Simple and Gradual Accessibility Roadmap<\/h3>\n\n\n\n<p>Figma doesn\u2019t need to do everything all at once. But it urgently needs to <strong>establish a clear and credible roadmap<\/strong>, and share it with the community.<br>If a design tool that aims to bridge designers and developers can\u2019t do this, it would be quite the irony.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1 &#8211; Semantic Completion<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add the missing HTML tags (lists, tables, forms)<\/li>\n\n\n\n<li>Enable automatic or guided heading structure (from <code>h1<\/code> to <code>h6<\/code>)<\/li>\n\n\n\n<li>Show warnings for disordered or duplicate headings<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2 &#8211; Accessible Interactions<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ensure consistent keyboard navigation (tab order, focus, visibility)<\/li>\n\n\n\n<li>Provide a way to test interaction behavior directly inside Figma Sites<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3 &#8211; ARIA Enrichment<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add basic ARIA roles and an interface to manage them<\/li>\n\n\n\n<li>Explicitly associate labels with inputs<\/li>\n\n\n\n<li>Provide accessible interactive components (modals, accordions, etc.)<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4 &#8211; Advanced Accessibility (Long-Term)<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Integrate automated accessibility tests (like an a11y linter or axe-core)<\/li>\n\n\n\n<li>Simulate screen reader output (a virtual screen reader view)<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Redefining What MVP Means in 2025<\/h3>\n\n\n\n<p>It may be time for Figma to <strong>redefine its concept of an MVP<\/strong>, a &#8220;Minimum Viable Product.&#8221;<br>Because today, a viable product can no longer rely on aesthetics alone. It also needs to be:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Readable, navigable, understandable<\/li>\n\n\n\n<li>Designed for everyone, not just the most privileged users<\/li>\n<\/ul>\n\n\n\n<p>A beta that <strong>doesn\u2019t include basic accessibility is not a neutral starting point<\/strong>, it&#8217;s already technical debt, and frankly, a disservice to disabled people.<\/p>\n\n\n\n<p>And accessibility debt, as we know, is always <strong>more expensive to fix later<\/strong>.<br>It\u2019s far better to <strong>build an inclusive roadmap from the beta stage<\/strong>, with clear steps, proper documentation, and open collaboration.<strong>hase b\u00eata<\/strong>, avec des \u00e9tapes claires, document\u00e9es, et ouvertes \u00e0 la contribution.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">In Conclusion: A Beta, Yes, But Not an Excuse<\/h2>\n\n\n\n<p>Figma Sites feels like a potential revolution in the design ecosystem. Creating actual websites without leaving your design tool, with HTML and CSS output included, that\u2019s exciting. But this revolution <strong>must not be half-inclusive<\/strong>.<\/p>\n\n\n\n<p>Yes, this is a beta.<br>But a beta is <strong>not an excuse<\/strong> to skip the fundamentals. In fact, it\u2019s the perfect time to <strong>lay down strong foundations<\/strong>. Skipping accessibility from the outset is how you build <strong>technical and human debt<\/strong>, the kind that\u2019s hard to pay back later.<\/p>\n\n\n\n<p>What Figma Sites has shown so far is <strong>a desire to do things right\u2026 with misaligned priorities<\/strong>. Time has been spent polishing visuals where users needed solid ground. Energy went into &#8220;spinning effects&#8221; while millions still can\u2019t navigate or fill out a basic form.<\/p>\n\n\n\n<p>This article isn\u2019t a complaint, it\u2019s <strong>an open hand<\/strong>. For Figma to become a truly modern tool, it must also become an accessible one. And that starts today, with the help of a whole community ready to test, contribute, and guide the way.<\/p>\n\n\n\n<p>There\u2019s still a lot of work to do. But there\u2019s still time to rethink the roadmap, and <strong>build a web that everyone can use, not just admire<\/strong>.<\/p>\n\n\n\n<p>We\u2019re not artists chasing pretty concepts.<br>We\u2019re designers who want to go further, toward purpose, toward people, and toward progress.<\/p>\n\n\n\n<div class=\"wp-block-group sources\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">More articles on this topic<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/adrianroselli.com\/2025\/05\/do-not-publish-your-designs-on-the-web-with-figma-sites.html\">Do not publish your designs on the web with Figma Sites<\/a> &#8211; by Adrian Roselli<\/li>\n\n\n\n<li><a href=\"https:\/\/uxdesign.cc\/figma-sites-when-accessibility-is-an-afterthought-070ba3b41553\">Figma Sites: When Accessibility Is An Afterthought<\/a> &#8211; by Kristina Gushcheva-Keippil\u00e4<\/li>\n<\/ul>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>On May 8th, Figma unveiled several new features, including Figma Sites, a tool that promises to revolutionize website creation directly within their design interface. Alongside it, Figma Make (AI &amp; Code), Figma Buzz (a community component feature similar to Canva), and Figma Draw (vector drawing) add new strings to the platform\u2019s bow.<\/p>\n","protected":false},"author":4,"featured_media":8871,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[776],"tags":[],"coauthors":[597],"class_list":["post-8876","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-user-experience"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/posts\/8876","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/comments?post=8876"}],"version-history":[{"count":3,"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/posts\/8876\/revisions"}],"predecessor-version":[{"id":8886,"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/posts\/8876\/revisions\/8886"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/media\/8871"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/media?parent=8876"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/categories?post=8876"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/tags?post=8876"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/coauthors?post=8876"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}