@progress/wct-a11y-spec

[ { "h2": "Accessibility Support" }, { "p": "Out of the box, the Telerik and Kendo UI TreeView provides extensive accessibility support and enables users with disabilities to acquire complete control over its features." }, { "p": "The TreeView is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://www.section508.gov/) requirements, follows the [Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA)](https://www.w3.org/WAI/ARIA/apg/) best practices for implementing the [keyboard navigation](#keyboard-navigation) for its `component` role, provides options for [managing its focus](#managing-the-focus) and is tested against the most popular [screen readers](#screen-readers)." }, { "h3": "WAI-ARIA" }, { "p": "This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any." }, { "p": "If the tree supports the load-more functionality, the **Load More** button is rendered as the `li.k-treeview-item` element and has `role=\"button\"`. The list item does not implement any of the following attributes." }, { "table": { "headers": [ "Selector", "Attribute", "Usage" ], "rows": [ { "Selector": "`.k-treeview-lines`", "Attribute": "`role=tree`", "Usage": "The root `div` element of the treeview." }, { "Selector": "`.k-treeview-group:not(.k-treeview-lines)`", "Attribute": "`role=group`", "Usage": "The `ul` element that wraps child nodes." }, { "Selector": "`.k-input-inner`", "Attribute": "`aria-label`", "Usage": "Specifies the announced name for the filter input." }, { "Selector": "", "Attribute": "`role=searchbox`", "Usage": "Specifies the role of the filter input." }, { "Selector": "", "Attribute": "`aria-controls=.k-treeview-lines id`", "Usage": "Points to the main ul element .k-treeview-lines." }, { "Selector": "`.k-treeview-item`", "Attribute": "`role=treeitem`", "Usage": "The `li` element rendered for a tree node." }, { "Selector": "", "Attribute": "`aria-level`", "Usage": "Announces the level of the tree node item. The value of the level is number-based (>=1). Must be added when only a subsection of the TreeView is rendered in the DOM." }, { "Selector": "", "Attribute": "`aria-setsize`", "Usage": "Announces the total count of the items at this level. Enables the user to understand the position of the navigation, for example, item 3 of 14. Must be added only when the load-more functionality of the tree is enabled and there are still nodes belonging to the group that are not loaded (rendered) yet." }, { "Selector": "", "Attribute": "`aria-expanded=true/false`", "Usage": "Announces the expanded state of the node. The value is `true` when expanded, and `false` when collapsed." }, { "Selector": "", "Attribute": "`aria-checked=true/false`", "Usage": "Rendered only when checkboxes are enabled. Announces the checked state of the node. If the checkbox is indeterminate, the value is `mixed`." }, { "Selector": "`.k-treeview-item:has(> span > .k-selected, > div > .k-selected) `", "Attribute": "`aria-selected=true`", "Usage": "Rendered only when selection is enabled. Announces the selected state of the node." }, { "Selector": "`.k-checkbox`", "Attribute": "`role=none/presentation`", "Usage": "Added to the wrapper element of the checkbox to prevent duplicated information announced to the user. The checked state is controlled by `aria-checked`." } ] } }, { "h3": "Managing the Focus" }, { "p": "The TreeView implements a roving tab index components strategy. On loading the TreeView, only the first node will contain `tabindex=\"0\"` and the navigation keys will 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." }, { "h3": "Keyboard Shortcuts" }, { "p": "The TreeView supports the following keyboard shortcuts:" }, { "table": { "headers": [ "Shortcut", "Behavior" ], "rows": [ { "Shortcut": "`Enter`", "Behavior": "Selects the focused tree view item when the selection mode is single or multiple. When the selection mode is multiple and there are other selected items, they get deselected." }, { "Shortcut": "`Space`", "Behavior": "Checks the checkbox of the TreeView node." }, { "Shortcut": "`Up Arrow`", "Behavior": "Goes to the previous tree node. The focus is moved to the previous node and its tabindex is set to `0`." }, { "Shortcut": "`Down Arrow`", "Behavior": "Goes to the next tree node. The focus is moved to the next node and its tabindex is set to `0`." }, { "Shortcut": "`Left Arrow`", "Behavior": "If the node is expanded, collapses it and the focus remains on the item. If the node is collapsed, the focus is moved to its parent." }, { "Shortcut": "`Right Arrow`", "Behavior": "If the node is collapsed, expands it and the focus remains on the item. If the node is expanded, the focus is moved to the first child node." }, { "Shortcut": "`Home`", "Behavior": "Moves the focus to the first node in the tree without opening or closing a node." }, { "Shortcut": "`End`", "Behavior": "Moves the focus to the last node in the tree that is focusable without opening a node." }, { "Shortcut": "`Ctrl` (or `Cmd` on Mac) + `Enter`", "Behavior": "Selects the focused item. When the item is already selected, it gets deselected." }, { "Shortcut": "Printable Characters", "Behavior": "Typing `M` or any other printable character focuses the next or the first item in the list." } ] } }, { "h3": "Testing" }, { "p": "The TreeView has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers." }, { "h3": "Screen Readers" }, { "p": "The TreeView has been tested with the following screen readers and browsers combinations:" }, { "table": { "headers": [ "Environment", "Tool" ], "rows": [ [ "Firefox", "NVDA" ], [ "Chrome", "JAWS" ], [ "Microsoft Edge", "JAWS" ] ] } }, { "h3": "Resources" }, { "ul": [ { "link": { "source": "https://www.w3.org/WAI/ARIA/apg/example-index/treeview/treeview-1/treeview-1a.html", "title": "WAI-ARIA Authoring Practices: File Directory Treeview Example" } }, { "link": { "source": "https://www.w3.org/WAI/ARIA/apg/patterns/treeview/", "title": "WAI-ARIA Authoring Practices: Treeview Pattern" } }, { "link": { "source": "https://www.w3.org/WAI/ARIA/apg/patterns/treeview/examples/treeview-navigation/", "title": "WAI-ARIA Authoring Practices: Navigation Treeview" } } ] } ]