跳到主要内容

无障碍

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

备注

如果您知道我们如何提高 React Flow 的可访问性，请随时与我们联系。

内置功能​

键盘控制​

  • 节点和边可通过使用 Tab 键进行聚焦 (tabIndex={0} + role="button")
  • 节点和边可以使用 Enter 或 Space 进行选择，使用 Escape 则无法选择
  • 节点可以使用箭头键移动（按 Shift 可以增加速度）
  • 节点和边获得 aria-descriptedby 属性来描述键盘控件

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

备注

当nodesDraggable和nodesFocusable为true时（默认行为），节点只能使用箭头键移动。

WAI-ARIA​

  • 边缘：默认 aria-label - 可使用新的边缘选项 ariaLabel 覆盖
  • 节点：ariaLabel 选项（这里没有默认值，因为我们假设节点内可能有文本）
  • 小地图组件：aria-descriptedby + 标题
  • 归因组件：aria-label
  • 控件组件：按钮的 aria-labels

更好访问的基于节点的 UI​

  • 当您的节点没有文本内容时，您应该通过节点选项提供 aria-label。
  • 当您的节点具有可通过将特定 aria-label 传递到边来使用的名称时，您可以改进边的默认 aria-label（从 source.id 到 target.id）。
  • 在您的应用程序中遵循最佳实践 WAI-ARIA 指南