New to Telerik UI for ASP.NET MVCStart a free 30-day trial

OrgChart Accessibility

Out of the box, the Telerik UI for ASP.NET MVC OrgChart provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.

The OrgChart is compliant with the Web Content Accessibility Guidelines (WCAG) 2.2 AA standards and Section 508 requirements, follows the Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA) best practices for implementing the keyboard navigation for its component role, provides options for managing its focus and is tested against the most popular screen readers.

WAI-ARIA

This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.

The OrgChart component represents a tree structure and allows editing of its items.

SelectorAttributeUsage
.k-orgchart-level-1role=treeThe root div element of the OrgChart. Contains all its top level items.
aria-orientation=horizontalSpecifies the orientation of the OrgChart tree.
.k-orgchart-group:not(.k-orgchart-level-1)role=groupThe element that wraps child nodes.
.k-orgchart-cardrole=treeitemThe card (node) representing the treeitem in the hierarchical structure.
aria-levelAnnounces the level of the tree node item. The value of level is number-based(>=1).
aria-keyshortcuts=EnterAnnounces the that the edit menu of the OrgChart can be activated via the Enter key.
.k-orgchart-card[aria-owns]aria-expanded=true/falsePresent when a node has subitems. Announces the expanded state of the node. It is true when expanded, and false when collapsed.
.k-orgchart-card[aria-expanded]aria-ownsPresent when a node has subitems. The value of the attribute is the id of the group element containing the current node children
.k-orgchart-card.k-focusaria-selected=trueAnnounces the selected (focused) item in the OrgChart.
.k-orgchart-card:not(.k-focus)aria-selected=falseAnnounces the not selected (focused) items in the OrgChart.
.k-avatar-image imgaltDescribes the avatar image of an item. Normally contains the name of the person/function represented by the item.
.k-orgchart-card-menurole=buttonSpecifies the menu icon of the item is a button.
aria-label=Edit menuProvides an accessible name for the edit button, as it does not contain text.
tabindex=-1The Edit menu button must not be part of the page tab sequence.
.k-orgchart-buttonrole=button or nodeName=buttonSpecifies the expand/collapse element of the OrgChart as a button.
aria-labelProvides an accessible name for the expand/collapse button, as it does not contain text.
tabindex=-1The expand/collapse button must not be part of the page tab sequence.

The edit popup of the OrgChart must implement the specification of the Window component with a Form component in it.

Window accessibility specification

Form accessibility specification

Resources

ARIA practices File Directory Treeview Example

Section 508

The OrgChart is fully compliant with the Section 508 requirements.

Testing

The OrgChart has been extensively tested automatically with axe-core and manually with the most popular screen readers.

To report any accessibility issues, contact the team through the Telerik Support System.

Screen Readers

The OrgChart has been tested with the following screen readers and browsers combinations:

EnvironmentTool
FirefoxNVDA
ChromeJAWS
Microsoft EdgeJAWS

Test Example

To test the OrgChart component, refer to the OrgChart Accessibility Demo.

Keyboard Navigation

For details on how the OrgChart keyboard navigation works, refer to the OrgChart Keyboard Navigation article.

See Also