AccessibilityPremium
The KendoReact Diagram is WCAG 2.2 AA and Section 508 compliant.
The component also follows WAI-ARIA Authoring Practices and the WAI-ARIA Graphics Module guidance for interactive graphics content.
The Diagram is an interactive Graphics Document. You can navigate between shapes and connections with the keyboard and move selected shapes through keyboard shortcuts.
WAI-ARIA Support
The Diagram implements accessibility semantics for the container and for shape/connection items.
| Selector | Attribute | Usage |
|---|---|---|
.k-diagram | role=graphics-document | Indicates that the Diagram root is a Graphics Document. |
.k-diagram | aria-roledescription | Clarifies the Diagram type for assistive technologies. |
.k-diagram | aria-label | Announces the user-provided Diagram label. |
.k-diagram | aria-activedescendant=.k-focus id | Points to the currently active shape or connection while the container keeps focus. |
[aria-roledescription='Shape'] | role=graphics-symbol | Defines Diagram shape role semantics. |
[aria-roledescription='Shape'] | aria-roledescription=Shape | Describes the item as a Shape. |
[aria-roledescription='Shape'] | aria-label | Announces a user-provided shape description. |
[aria-roledescription='Connection'] | role=graphics-symbol | Defines Diagram connection role semantics. |
[aria-roledescription='Connection'] | aria-roledescription=Connection | Describes the item as a Connection. |
[aria-roledescription='Connection'] | aria-label | Announces a user-provided connection description. |
The Diagram uses the active descendant pattern for keyboard navigation. The container remains focused, while
aria-activedescendantpoints to the current shape or connection.
Section 508
The KendoReact Diagram supports Section 508 accessibility requirements.
Automated Testing
Accessibility checks are validated with Axe Core.
Screen Readers
| Environment | Tool |
|---|---|
| Firefox | NVDA |
| Chrome | JAWS |
| Microsoft Edge | JAWS |