# Building accessibility into a canvas-based product

DevFeed: [Building accessibility into a canvas-based product](<https://devfeed.tech/articles/building-accessibility-into-a-canvas-based-product-9554.md>)

Original publisher: [Read original article](<https://www.figma.com/blog/building-accessibility-into-a-canvas-based-product/>)

Author: David Winslow; Elynn Lee

Published: 2026-07-01T17:56:00Z

Content type: article

Language: en

Sources: [Figma Blog](<https://devfeed.tech/sources/figma-blog.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [Canvas](<https://devfeed.tech/topics/canvas.md>), [Figma](<https://devfeed.tech/topics/figma.md>), [Document Object Model (DOM)](<https://devfeed.tech/topics/dom.md>), [aria](<https://devfeed.tech/topics/aria.md>), [HTML](<https://devfeed.tech/topics/html.md>), [React](<https://devfeed.tech/topics/react.md>), [Data structures](<https://devfeed.tech/topics/data-structures.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [aria](<https://devfeed.tech/tags/aria.md>), [figma](<https://devfeed.tech/tags/figma.md>), [html](<https://devfeed.tech/tags/html.md>), [infinite](<https://devfeed.tech/tags/infinite.md>), [performance](<https://devfeed.tech/tags/performance.md>), [react](<https://devfeed.tech/tags/react.md>), [real-time](<https://devfeed.tech/tags/real-time.md>), [web](<https://devfeed.tech/tags/web.md>)

## AI overview

Figma explains how it added accessibility to its canvas-based product, whose browser-rendered accessibility tree is largely absent because the editor does not use traditional HTML and DOM for rendering. The solution combines an internal accessibility tree, a synchronized Mirror DOM React component, and selection synchronization so screen-reader and keyboard users can navigate and edit designs.

## Source excerpt

Building on a canvas unlocks performance that a traditional HTML web app can't touch. It also strips away any accessibility the browser gives you for free. Here's how we built it back in.