Accessibility Support
Out of the box, the Telerik and Kendo UI PanelBar provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
The PanelBar is compliant with the Web Content Accessibility Guidelines (WCAG) 2.2 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.
| Selector | Attribute | Usage |
|---|---|---|
.k-panelbar | role=tree | The root element of the PanelBar has role tree. |
aria-activedescendant=.k-item id | Points to the currently focused item in the PanelBar. | |
.k-panelbar-group | role=group | The ul element that wraps child nodes. |
[aria-expanded='false']>.k-panelbar-group | aria-hidden=true | Hides the group element from assistive technologies when its parent is not expanded. |
.k-item | role=treeitem | The li element rendered for a PanelBar item. |
aria-expanded=true/false | Announces the expanded state of the item (if expandable). It is true when expanded, and false when collapsed. | |
aria-selected=true/false | Announces the selected state of the item. |
Managing the Focus
The PanelBar is a single-tab-stop component. It implements the roving tab index strategy. On initial load - only first item will contain tabindex="0" and navigation keys move the focus to other nodes and change the respective tabindex. When the focus is moved away from the treeview, the tabindex="0" remains on the last focused node.
item
>
items
scenario. It does not treat the
item
>
content
scenario, which is not supported in terms of accessibility in the component. For such implementations, please use the ExpansionPanel instead, or a set of seleral ExpansionPanels.
Keyboard Shortcuts
| Shortcut | Behavior |
|---|---|
Arrow Up | Focuses the previous PanelBar item. If no previous item is available, focuses the last item. |
Arrow Down | Focuses the next PanelBar item. If no next item is available, focuses the first item. |
Arrow Left | Collapses an expanded item. If the item is collapsed, focuses its parent. |
Arrow Right | Expands a collapsed item. If the item is expanded, focuses its first child node. |
Home | Moves focus to the first item in the PanelBar without expanding or collapsing an item. |
End | Moves focus to the last item in the PanelBar that is focusable without expanding an item. |
Enter | Selects the focused item and toggles the item if it is expandable. It also triggers its action (click or opening url). |
Space | Selects the focused item and toggles the item if it is expandable. It also triggers its action (click or opening url). |
Testing
The PanelBar has been extensively tested automatically with axe-core and manually with the most popular screen readers.
Screen Readers
The PanelBar has been tested with the following screen readers and browsers combinations:
| Environment | Tool |
|---|---|
| Firefox | NVDA |
| Chrome | JAWS |
| Microsoft Edge | JAWS |
