--- title: Building accessibility into a canvas-based product description: Figma's canvas bypasses the browser's standard HTML rendering to achieve high performance, which eliminates built-in browser accessibility features. To restore... canonical: https://daily.dev/posts/building-accessibility-into-a-canvas-based-product-wcti0fjml twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Building accessibility into a canvas-based product | daily.dev og:description: Figma's canvas bypasses the browser's standard HTML rendering to achieve high performance, which eliminates built-in browser accessibility features. To restore... og:url: https://daily.dev/posts/building-accessibility-into-a-canvas-based-product-wcti0fjml og:image: https://api.daily.dev/og/posts/WCTI0fJMl.png og:image:alt: Building accessibility into a canvas-based product og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Building accessibility into a canvas-based product **[Figma](https://daily.dev/sources/figma)** · 10 min read · 0 upvotes · 0 comments ## Summary Figma's canvas bypasses the browser's standard HTML rendering to achieve high performance, which eliminates built-in browser accessibility features. To restore accessibility, Figma engineers built a Mirror DOM system: a hidden React-based DOM structure that mirrors the canvas scenegraph and stays in sync with it. The system includes an internal accessibility tree that caches and surgically updates accessible summaries for each design layer, a Mirror DOM that uses affine transforms for spatial positioning (required for screen magnifiers and voice control tools), bidirectional synchronization between canvas selection and system keyboard focus, and an ARIA live region announcement system that coalesces rapid events like arrow-key nudges into single announcements. The work spans prototype viewing, FigJam, and the full design editor, and was shaped by user feedback through a partnership with Fable. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Similar posts on daily.dev - [15\+ ways we’re improving accessibility in Figma](https://daily.dev/posts/15-ways-we-re-improving-accessibility-in-figma-nx0ik1ywx) · Figma · 1 upvotes · 0 comments --- Tags: [#react](https://daily.dev/tags/react), [#accessibility](https://daily.dev/tags/accessibility), [#figma](https://daily.dev/tags/figma) [View this post on daily.dev](https://daily.dev/posts/building-accessibility-into-a-canvas-based-product-wcti0fjml) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Building accessibility into a canvas-based product","url":"https://daily.dev/posts/building-accessibility-into-a-canvas-based-product-wcti0fjml","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/building-accessibility-into-a-canvas-based-product-wcti0fjml"},"datePublished":"2026-07-01T21:16:43.132Z","dateModified":"2026-07-01T21:17:10.587Z","description":"Figma's canvas bypasses the browser's standard HTML rendering to achieve high performance, which eliminates built-in browser accessibility features. To restore...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/cea61d63e37b12c8edddb6c998f5e850?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/cea61d63e37b12c8edddb6c998f5e850?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Figma","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Figma","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/d81fd85ddaea4d25a658694de448118f","url":"https://daily.dev/sources/figma"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/building-accessibility-into-a-canvas-based-product-wcti0fjml","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"react,accessibility,figma","timeRequired":"PT10M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Figma","item":"https://daily.dev/sources/figma"},{"@type":"ListItem","position":3,"name":"Building accessibility into a canvas-based product"}]} ```