學習進階使用

無障礙功能

流程可透過鍵盤存取,並可由螢幕閱讀器讀取。節點和邊線可透過鍵盤聚焦、選取、移動和刪除。

如果您對如何改進 React Flow 的無障礙功能有任何想法,請隨時聯絡我們

內建功能

鍵盤控制

  • 節點和邊線可使用 Tab 鍵聚焦(tabIndex={0} + role="button"
  • 節點和邊線可使用 EnterSpace 鍵選取,使用 Escape 鍵取消選取
  • 節點可使用方向鍵移動(按住 Shift 鍵可增加速度)
  • 節點和邊線會取得 aria-describedby 屬性來描述鍵盤控制

您可以使用以下屬性設定鍵盤控制:nodesFocusableedgesFocusabledisableKeyboardA11ynodesFocusableedgesFocusable(預設皆為 true)必須為 true,如果您希望能夠使用 Tab 鍵聚焦元素,然後使用 Enter 和 Escape 鍵選取或取消選取它們。如果您設定 disableKeyboardA11y={true},則節點將無法再使用方向鍵移動。

只有當 nodesDraggablenodesFocusable 為 true(預設行為)時,節點才能使用方向鍵移動。

WAI-ARIA

  • 邊線:預設 aria-label - 可使用新的 Edge 選項 ariaLabel 覆寫
  • 節點:ariaLabel 選項(此處沒有預設值,因為我們假設節點內可能會有文字)
  • 迷你地圖元件:aria-describedby + 標題
  • 歸屬元件:aria-label
  • 控制元件:控制容器和按鈕的 aria-label

更易於存取的節點式 UI

  • 當您的節點沒有文字內容時,您應該透過節點選項提供 aria-label。
  • 當您的節點有名稱可供使用時,您可以透過將特定 aria-label 傳遞至邊線,來改善邊線的預設 aria-label(「從 source.id 到 target.id」)。
  • 在您的應用程式中遵循最佳的WAI-ARIA 實務指南