@progress/wct-a11y-spec
Version:
Contains accessibility and keyboard navigation specification of Telerik and Kendo web components.
95 lines (61 loc) • 6.39 kB
Markdown
Out of the box, the {{ site.product }} MultiSelect provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
The MultiSelect is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards and [Section 508](https://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 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.
### MultiSelect Wrapping Element
The following table summarizes the selectors and attributes supported by the MultiSelect wrapper element:
| Selector | Attribute | Usage |
| -------- | --------- | ----- |
| `.k-input-inner` | `role=combobox` | Announces the presence of a combobox as the inner element of the MultiSelect used for filtering. |
| | `label for` or `aria-label` or `aria-labelledby` | The input needs an accessible name that will be assigned to it. |
| | `aria-haspopup=listbox` | Indicates the presence of a listbox popup. |
| | `aria-expanded=true/false` | Announces the state of the popup visibility. |
| | `aria-controls=.k-list-ul id` | Points to the listbox element. Signifies that the `combobox` element controls the `listbox` one. |
| | `aria-autocomplete=list` | When the filtering feature is enabled, the attribute is rendered and the value is set to the list. |
| | `aria-describedby=.k-chip-list id` | Points to the `taglist` element that contains the selected items. |
| | `aria-activedescendant=.k-list-item.k-focus id` | Points to the focused item,which is either an item from the popup or a tag item from the selected items. The focused item is changed through keyboard navigation. If the focus is not currently on a tag item and the popup is not visible, the attribute must not point to any element or must be removed. |
| | `aria-readonly=true` | The attribute is rendered only when the MultiSelect is read-only. |
| | `aria-invalid=true` | The attribute is rendered only when the MultiSelect is in a form and announces the valid state of the component. |
| | `aria-busy=true` | The attribute is rendered only when the MultiSelect is loading data. |
| | `tabindex=0` | The element must be focusable. |
| `.k-disabled .k-input-inner` | `aria-disabled=true` | The attribute is rendered only when the MultiSelect is disabled. |
| `.k-input-button` | `role=button` or `nodeName=button` | The element must either be a `<button>` element or have the `role="button"` assigned. |
| | `aria-label` | The button needs an accessible name that will be assigned to it. |
| | `tabindex=-1` | The button element must not be focusable. |
### Popup Listbox
The popup element of the MultiSelect must implement the WAI-ARIA specification for a Popup List component. The following table summarizes the selectors and attributes supported by the listbox popup of the MultiSelect:
| Selector | Attribute | Usage |
| -------- | --------- | ----- |
| `.k-list-ul` | `aria-multiselectable=true` | Announces multiselection of the listbox popup. |
| Selector | Attribute | Usage |
| -------- | --------- | ----- |
| `.k-animation-container` | `role=region` | When the component container is appended to the `<body>` element of the document, it requires you to assing a `landmark` role to it. Otherwise, append it to an element with an appropriate `landmark` role. |
| | `aria-label` or `aria-labelledby` | When the container has a `region` role assigned, povides a label. |
| `.k-list .k-no-data` | `aria-live=polite` | Identifies the element as a live region in the `polite` state, meaning assistive technology users are informed about changes to the region at the next available opportunity. |
| `.k-list-ul` | `role=listbox` | Identifies the `ul` element as a listbox. |
| | `aria-label` or `aria-labelledby` | Provides a label for the listbox of the ComboBox. |
| `.k-list-item` | `role=option` | Identifies the `li` element as a listbox option. |
| | `id` | When grouped, the list items must have an `id` attribute specified, so that the "aria-owns" attribute of their group header elements (with `role=group`) point to that ids. |
| | `aria-describedby` | When grouped, the list items must have an "aria-describedby" attribute pointing to the id of the `k-list-item-text` element in their `k-list-group-item`. |
| `.k-list-item.k-selected` | `aria-selected=true` | Indicates the selected state of the item. |
| `.k-list-group-item` | `role=group` | The group elements in the popup list must be have `role=group`. |
| | `aria-owns` | The group elements in the popup list must own the list items belonging to their group. |
| `.k-list-group-item>.k-list-item-text` | `id` | The `k-list-item-text` elements of the `k-list-group-item` must have an id specified. The `aria-labelledby` attribute of the list items in the group must point to that id. |
### Adaptive Mode
When the component is in adaptive mode, the popup element follows the specifications of the ActionSheet component.
[ActionSheet accessibility specification]({{actionsheet_a11y_link}})
## Resources
[WAI-ARIA Authoring Practices: Select-Only Combobox Example](https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html)
[WAI-ARIA Authoring Practices: Scrollable Listbox Example](https://www.w3.org/WAI/ARIA/apg/example-index/listbox/listbox-scrollable.html)
## Section 508
The MultiSelect is fully compliant with the [Section 508 requirements](http://www.section508.gov/).
## Testing
The MultiSelect has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
### Screen Readers
The MultiSelect has been tested with the following screen readers and browsers combinations:
| Environment | Tool |
| ----------- | ---- |
| Firefox | NVDA |
| Chrome | JAWS |
| Microsoft Edge | JAWS |