可访问性

¥Accessibility

流程可通过键盘访问，并可通过屏幕阅读器读取。节点和边可通过键盘聚焦、选择、移动和删除。

¥A flow is accessible with a keyboard and readable by a screen reader. Nodes and edges are focusable, selectable, moveable and deletable with the keyboard.

内置功能

¥Built-in Features

键盘控制

¥Keyboard Controls

• 节点和边可通过 Tab 键 (tabIndex={0} + role="button") 获得焦点

  ¥Nodes and edges are focusable by using the Tab key (tabIndex={0} + role="button")

• 节点和边可通过 Enter 或 Space 获得选择，可通过 Escape 取消选择

  ¥Nodes and edges are selectable by using Enter or Space, un-selectable by using Escape

• 节点可使用箭头键移动（按 Shift 可增加速度）

  ¥Nodes are moveable with arrow keys (press Shift for increasing velocity)

• 节点和边获得 aria-describedby 属性来描述键盘控制

  ¥Nodes and Edges get a aria-describedby attribute to describe keyboard controls

你可以使用以下属性配置键盘控件：nodesFocusable、edgesFocusable 和 disableKeyboardA11y。如果你希望能够使用 Tab 键聚焦元素，然后使用 Enter 和 Escape 键选择或取消选择它们，则 nodesFocusable 和 edgesFocusable（默认情况下均为 true）需要为 true。如果你正在设置 disableKeyboardA11y={true}，则节点不再可以使用箭头键移动。

¥You can configure the keyboard controls with the props: nodesFocusable, edgesFocusable and disableKeyboardA11y. nodesFocusable and edgesFocusable (both true by default) need to be true if you want to be able to focus elements with Tab and then select or deselect them with Enter and Escape. If you are setting disableKeyboardA11y={true}, the nodes are not moveable with arrow keys anymore.

WAI-ARIA

• 边缘：默认 aria-label - 可使用新的 Edge 选项 ariaLabel 覆盖

  ¥Edges: Default aria-label - overwritable with new Edge option ariaLabel

• 节点：ariaLabel 选项（这里没有默认值，因为我们假设节点内可能有文本）

  ¥Nodes: ariaLabel option (no default here, because we assume that there might be text inside the node)

• 小地图组件：aria-describedby + 标题

  ¥Minimap component: aria-describedby + title

• 归因组件：aria-label

  ¥Attribution component: aria-label

• 控制组件：aria-label 用于控件容器和按钮

  ¥Controls component: aria-label for controls container and buttons

更易于访问的基于节点的 UI

¥Better accessible node-based UIs

• 当你的节点没有文本内容时，你应该通过节点选项提供一个 aria-label。

  ¥When your nodes don’t have textual content, you should provide an aria-label via the node options.

• 当你的节点具有可以通过将特定的 aria 标签传递给边缘来使用的名称时，你可以改进边缘的默认 aria-label（‘从 source.id 到 target.id’）。

  ¥You can improve the default aria-label (‘from source.id to target.id’) of an edge, when your nodes have names that you could use by passing specific aria-labels to the edges.

• 在你的应用中遵循最佳 练习 WAI-ARIA 指南 

  ¥follow best practice WAI-ARIA guides  in your application