Accessibility

Vue Flow provides keyboard and screen-reader support to help meet accessibility standards. By default, all nodes and edges are keyboard-focusable and operable. You can toggle these features with props such as nodesFocusable, edgesFocusable, and disableKeyboardA11y, passed to <VueFlow>:

<script setup lang="ts">
import { VueFlow } from '@xyflow/vue';
import '@xyflow/vue/style.css';
</script>
 
<template>
  <VueFlow
    v-model:nodes="nodes"
    v-model:edges="edges"
    :nodes-focusable="true"
    :edges-focusable="true"
    :disable-keyboard-a11y="false"
  >
    <!-- ...other components like Controls, MiniMap... -->
  </VueFlow>
</template>

Built-in features

• Tab navigation: Pressing Tab moves focus through all focusable nodes and edges. These elements receive tabindex="0" and, by default, role="group".
• Select / deselect: Press Enter or Space to select the focused node or edge, and Escape to clear the selection.
• Move nodes with arrow keys: If nodesDraggable and nodesFocusable are both true (the default), you can move the selected node with the arrow keys. Hold Shift to move faster. Setting :disable-keyboard-a11y="true" disables arrow-key movement, while tab-focus and selection still work.
• Automatic panning: When a node receives focus, Vue Flow pans the canvas to bring it into view. Toggle this with the autoPanOnNodeFocus prop.
• ARIA descriptions: Vue Flow adds ARIA descriptions for keyboard guidance, configurable through ariaLabelConfig.

ARIA roles for nodes and edges

By default Vue Flow uses semantic ARIA roles for interactive elements. Override a node’s role with the ariaRole field:

const nodes = [
  { id: '1', position: { x: 0, y: 0 }, data: { label: 'Hello' }, ariaRole: 'button' },
];

If you don’t set a role, role="group" is applied. Customizing ariaRole lets you match any relevant role ('listitem', 'region', and so on), improving the semantics for assistive technology.

DOM attributes

To pass custom ARIA or other DOM-level attributes (aria-roledescription, data-*, tabindex, and so on), use the domAttributes field. It’s available on both nodes and edges:

const nodes = [
  {
    id: '2',
    position: { x: 0, y: 100 },
    data: { label: 'Accessible Node' },
    domAttributes: {
      'aria-roledescription': 'collapsible node',
      'data-test-id': 'node-2',
    },
  },
];

This gives you full control over accessibility-related attributes while keeping Vue Flow’s built-in roles and behavior.

Localizing accessibility messages

Vue Flow’s built-in accessibility text (keyboard instructions and live updates) can be customized or localized with the ariaLabelConfig prop, an object mapping message keys to strings (or functions). The keys are:

For example, to localize the node instructions:

<script setup lang="ts">
import { Controls, MiniMap, VueFlow } from '@xyflow/vue';
 
const ariaLabelConfig = {
  'node.a11yDescription.default': 'Press [Enter] to select this node',
  'node.a11yDescription.keyboardDisabled': 'Keyboard navigation is disabled',
};
</script>
 
<template>
  <VueFlow v-model:nodes="nodes" v-model:edges="edges" :aria-label-config="ariaLabelConfig">
    <MiniMap />
    <Controls />
  </VueFlow>
</template>

Vue Flow then uses your text instead of the defaults, so screen readers announce messages in the user’s language.

WCAG 2.1 AA

Vue Flow provides features that help you meet key WCAG 2.1 AA criteria when implemented properly:

• Keyboard: Tab navigation to nodes and edges, interaction with Enter / Space, and arrow-key movement for nodes support keyboard operability.
• Screen reader: Semantic ARIA roles and labels (role="group", aria-label, aria-roledescription) let assistive technology announce nodes and edges meaningfully.
• ARIA live regions: Dynamic updates are announced through an aria-live="assertive" region that reports node movements.
• Instructions and focus management: Contextual instructions (“Press enter or space to select a node…”) plus automatic panning-into-view on focus help satisfy input-assistance requirements.

See the ARIA authoring practices  for background on ARIA best practices.