TLDR Tech / Design
Building Accessibility Into a Canvas-based Product
Figma built a synthetic "Mirror DOM" to bring screen reader and keyboard accessibility to its canvas-based renderer, which otherwise bypasses the browser's native accessibility tree entirely. The system relies on an internal accessibility tree that generates per-layer summaries, a recursive React component that mirrors those layers into hidden but spatially-positioned DOM elements, and bidirectional syncing between canvas selection and system focus. This work expanded from Prototype viewer support in 2022 through FigJam and Design/Dev Mode/Slides improvements in 2024-2025, developed with accessibility feedback from Fable's assistive-technology users.
Read the full story