Diagram - Accessibility

#Usage

import { Diagram } from '@primeui/vue-diagram';

<Diagram.Root :store="store" page-id="page">
    <Diagram.CommandButton command-id="fit" v-slot="{ getButtonProps }">
        <button type="button" v-bind="getButtonProps()">Fit diagram</button>
    </Diagram.CommandButton>
    <Diagram.Viewport label="Review workflow" style="height: 24rem" />
</Diagram.Root>

This skeleton assumes an initialized store with page page. Use First Diagram for model creation, style imports and store disposal.

#Name and orient the viewport

DiagramViewport.label defaults to 'Diagram'. Set a specific label when several diagrams are mounted. The viewport is role="region" with tabindex="0" and a generated instruction description. It has a polite live region for graph announcements. Root text overrides generated wording with strings/callbacks; missing overrides use ENGLISH_DIAGRAM_TEXT.

Node names derive from authored content such as a title or label and fall back to identity. Port controls likewise use explicit port/node naming. Supplying a meaningful label is useful even when a graphic is familiar visually. Application buttons, custom forms, tables and charts need their own accessible names and semantics. Root wording does not translate every copied or projected control.

#Focus and selection

Focus identifies the graph item being navigated; selection identifies the edit target set. Arrow keys navigate, Space selects and Shift+Space toggles. Escape cancels an interaction and returns to viewport focus. Native input/textarea/ select/button/link ownership and IME composition bypass graph key handling. Tab traverses application controls normally.

Virtualization may remove an offscreen rich node view. The semantic graph remains in the store/index. Explorer search/reveal can mount and focus an offscreen target; hidden, clipped or collapsed items require the relevant visibility and ownership behavior. A DOM node staying mounted is not the persistence contract for a field value. Save through Diagram.Field or an explicit model action.

The copied explorer's search and graph relationships provide a textual route to selection/reveal without locating a shape by pointer. See Search and Virtualization.

#Non-drag authoring

Each owning guide includes its supported path. An unavailable action is not made available by keyboard input: command execution rechecks policy. DiagramCommandButton binds native disabled state, aria-disabled and a reason title from current command state.

#Custom overlays and content

The default context menu supports menu roles, arrow navigation and Escape/Tab closure. Tooltips use focus/hover and aria-describedby ownership. Custom templates must retain the appropriate roles, focusable controls, disabled state and closure behavior. Keep actionable content out of hover-only text. Use [data-diagram-interactive] for application controls that own input.

Theme customization must preserve visible focus and readable names, labels, status and unavailable reasons in both themes. Reduced-motion rules cover only the transitions declared by shared styles. Check custom authored colors and symbols in the application's actual contrast/forced-color environment.

#Validate the application

Test keyboard authoring, explorer navigation, focus recovery, native fields and policy feedback with the copied preset and custom content you use. VoiceOver speech/navigation and physical touch, pen and real IME input have not been verified. Check your application with its target screen readers and devices. Browser media and input emulation does not establish assistive-technology or physical-device support.

Keyboard and input · Slots and contexts · Theming · Supported profiles

#Related Docs

• Architecture
• Imports
• API

Editable labels expose a named Edit action and visible keyboard focus. Labels that Core denies remain readable without an edit role, cursor or tab stop. Individual connection ports use both node and port permissions; permanently unavailable handles are absent. Policy changes update these states immediately.