Accessibility Support
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.
The ListView 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-listview:not(.k-selectable) .k-listview-content | role=list | Specifies the role of non selectable ListView content element. |
.k-listview.k-selectable .k-listview-content | role=listbox | Specifies the role of selectable ListView content element. |
.k-listview:not(.k-selectable) .k-listview-item | role=listitem | Specifies the role of each item in a non selectable ListView. |
.k-listview.k-selectable .k-listview-item | role=option | Specifies the role of each item in a selectable ListView. |
.k-listview-item | aria-setsize | Specifies the total number of items present in the ListView. |
aria-posinset | 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. | |
.k-listview-item:nth-child(1) | tabindex=0 | The first item in the ListView must be focusable by default. |
Managing the Focus
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.
The ListView is composed by two structural elements:
- ListView Content;
- ListView Pager;
Keyboard Shortcuts applicable to the Content element
| Shortcut | Behavior |
|---|---|
Right Arrow | Moves the focus to the next rendered item. If the focus is on the last item, the focus does not move. |
Down Arrow | Moves the focus to the next rendered item. If the focus is on the last item, the focus does not move. |
Left Arrow | Moves the focus to the previous rendered item. If the focus is on the first item, the focus does not move. |
Up Arrow | Moves the focus to the previous rendered item. If the focus is on the first item, the focus does not move. |
Home | Moves the focus to the first rendered item. |
End | Moves the focus to the last rendered item. |
Keyboard Shortcuts applicable to the Pager element
The Pager component is focusable, and it's actions are described in the Pager keyboard navigation specification:
Testing
The ListView has been extensively tested automatically with axe-core and manually with the most popular screen readers.
Screen Readers
The ListView has been tested with the following screen readers and browsers combinations:
| Environment | Tool |
|---|---|
| Firefox | NVDA |
| Chrome | JAWS |
| Microsoft Edge | JAWS |
