将无障碍功能融入基于 canvas 的产品中

Building accessibility into a canvas-based product

将无障碍功能构建到基于画布的产品中

Similar to a video game, Figma’s canvas takes over rendering from the browser to maximize performance. This lets us deliver powerful features like infinite zoom and real-time multiplayer. But because we don’t use traditional HTML and DOM to render Figma’s canvas, we don’t get any of the accessibility features that are built into the browser by default.

与电子游戏类似，Figma 的画布接管了浏览器的渲染工作以最大化性能。这使我们能够提供无限缩放和实时多人协作等强大功能。但由于我们不使用传统的 HTML 和 DOM 来渲染 Figma 的画布，因此我们无法获得浏览器默认内置的任何无障碍功能。

To make Figma accessible to more people, we created a Mirror DOM structure that could stay in sync with any Figma design. Here, we’ll go behind the scenes of how we made it possible for anyone to navigate a Figma file with a screen reader, hear changes as they’re announced, and operate the editor with a keyboard.

为了让 Figma 对更多人实现无障碍访问，我们创建了一个 Mirror DOM 结构，使其能够与任何 Figma 设计保持同步。在这里，我们将深入幕后，了解我们是如何让任何人都能使用屏幕阅读器导航 Figma 文件、在更改被播报时听到变化，并使用键盘操作编辑器的。

Learn more about Figma’s keyboard and screen reader accessibility improvements.

了解更多关于 Figma 键盘和屏幕阅读器无障碍功能改进的信息。

Synthesizing the DOM

合成 DOM

Browser engines have a concept called the accessibility tree: a data structure distilled from the document containing the non-visual information needed for assistive technologies to work. When a screen reader user executes the “go to next form field” command, the accessibility tree tells the screen reader where to go. The browser builds this tree from DOM, semantic HTML, ARIA attributes, and some additional computed state.

浏览器引擎有一个称为无障碍树的概念：这是一种从文档中提取的数据结构，包含辅助技术工作所需的非视觉信息。当屏幕阅读器用户执行“转到下一个表单字段”命令时，无障碍树会告诉屏幕阅读器该去哪里。浏览器通过 DOM、语义化 HTML、ARIA 属性以及一些额...