# Accessibility

The KendoReact Diagram is [WCAG 2.2 AA](https://www.w3.org/TR/WCAG22/) and [Section 508](https://www.section508.gov/) compliant.

The component also follows [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/) and the [WAI-ARIA Graphics Module](https://www.w3.org/TR/graphics-aria-1.0/) 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-activedescendant` points to the current shape or connection.

## Section 508

The KendoReact Diagram supports [Section 508](https://www.section508.gov/) accessibility requirements.

## Automated Testing

Accessibility checks are validated with [Axe Core](https://www.npmjs.com/package/axe-core).

## Screen Readers

| Environment    | Tool |
| -------------- | ---- |
| Firefox        | NVDA |
| Chrome         | JAWS |
| Microsoft Edge | JAWS |

## Suggested Links

* [Keyboard Navigation](https://www.telerik.com/kendo-react-ui-develop/components/diagram/keyboard-navigation)
* [API Reference of the Diagram](https://www.telerik.com/kendo-react-ui-develop/components/diagram/api)
* [React Diagram Overview](https://www.telerik.com/kendo-react-ui-develop/components/diagram)