[ { "h2": "Accessibility Support" }, { "p": "Out of the box, the Telerik and Kendo UI ListView provides extensive accessibility support and enables users with disabilities to acquire complete control over its features." }, { "p": "The ListView 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." }, { "table": { "headers": [ "Selector", "Attribute", "Usage" ], "rows": [ { "Selector": "`.k-listview:not(.k-selectable) .k-listview-content`", "Attribute": "`role=list`", "Usage": "Specifies the role of non selectable ListView content element." }, { "Selector": "`.k-listview.k-selectable .k-listview-content`", "Attribute": "`role=listbox`", "Usage": "Specifies the role of selectable ListView content element." }, { "Selector": "`.k-listview:not(.k-selectable) .k-listview-item`", "Attribute": "`role=listitem`", "Usage": "Specifies the role of each item in a non selectable ListView." }, { "Selector": "`.k-listview.k-selectable .k-listview-item`", "Attribute": "`role=option`", "Usage": "Specifies the role of each item in a selectable ListView." }, { "Selector": "`.k-listview-item`", "Attribute": "`aria-setsize`", "Usage": "Specifies the total number of items present in the ListView." }, { "Selector": "", "Attribute": "`aria-posinset`", "Usage": "Specifies the position of the current item in the entire list of items present in the ListView. Value must be greated than or equal to 1 and smaller than or equal to the total number of items in the ListView." }, { "Selector": "`.k-listview-item:nth-child(1)`", "Attribute": "`tabindex=0`", "Usage": "The first item in the ListView must be focusable by default." } ] } }, { "h3": "Managing the Focus" }, { "p": "The ListView is a single tab stop component implementing the roving tab index pattern. By default its first item is part of the page tab sequece. To move the focus to another ListView item, arrow keys must be used. The ListView is also a templated component, and as such using the `Tab` key will move the focus through the focusable elements of the item template." }, { "p": "The ListView is composed by two structural elements:" }, { "ul": [ "ListView Content;", "ListView Pager;" ] }, { "h3": "Keyboard Shortcuts applicable to the Content element" }, { "table": { "headers": [ "Shortcut", "Behavior" ], "rows": [ { "Shortcut": "`Right Arrow`", "Behavior": "Moves the focus to the next rendered item. If the focus is on the last item, the focus does not move." }, { "Shortcut": "`Down Arrow`", "Behavior": "Moves the focus to the next rendered item. If the focus is on the last item, the focus does not move." }, { "Shortcut": "`Left Arrow`", "Behavior": "Moves the focus to the previous rendered item. If the focus is on the first item, the focus does not move." }, { "Shortcut": "`Up Arrow`", "Behavior": "Moves the focus to the previous rendered item. If the focus is on the first item, the focus does not move." }, { "Shortcut": "`Home`", "Behavior": "Moves the focus to the first rendered item." }, { "Shortcut": "`End`", "Behavior": "Moves the focus to the last rendered item." }, { "Shortcut": "`Enter`", "Behavior": "When there are focusable items within a ListView item - the focus moves to the first focusable item inside." }, { "Shortcut": "`Esc`", "Behavior": "If the focus is on an element inside a ListView item - returns the focus back to the ListView item." } ] } }, { "h3": "Keyboard Shortcuts applicable to the Pager element" }, { "p": "The `Pager` component is focusable, and it's actions are described in the `Pager` keyboard navigation specification:" }, { "link": { "title": "Pager specification", "source": "{{pager_kb_link}}" } }, { "h3": "Testing" }, { "p": "The ListView 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 ListView 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/TR/wai-aria-1.2/#list", "title": "WAI-ARIA Specification: List" } }, { "link": { "source": "https://www.w3.org/TR/wai-aria-1.2/#listitem", "title": "WAI-ARIA Specification: Listitem" } }, { "link": { "source": "https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex", "title": "ARIA Authoring Practices: Roving Tabindex" } } ] } ]