無障礙功能
流程可透過鍵盤存取,並可由螢幕閱讀器讀取。節點和邊線可透過鍵盤聚焦、選取、移動和刪除。
如果您對如何改進 React Flow 的無障礙功能有任何想法,請隨時聯絡我們。
內建功能
鍵盤控制
- 節點和邊線可使用
Tab
鍵聚焦(tabIndex={0}
+role="button"
) - 節點和邊線可使用
Enter
或Space
鍵選取,使用Escape
鍵取消選取 - 節點可使用方向鍵移動(按住 Shift 鍵可增加速度)
- 節點和邊線會取得
aria-describedby
屬性來描述鍵盤控制
您可以使用以下屬性設定鍵盤控制:nodesFocusable
、edgesFocusable
和 disableKeyboardA11y
。nodesFocusable
和 edgesFocusable
(預設皆為 true)必須為 true,如果您希望能夠使用 Tab 鍵聚焦元素,然後使用 Enter 和 Escape 鍵選取或取消選取它們。如果您設定 disableKeyboardA11y={true}
,則節點將無法再使用方向鍵移動。
只有當 nodesDraggable
和 nodesFocusable
為 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 實務指南