MultiSelect Accessibility
The MultiSelect is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.1, and keyboard support.
For more information, refer to:
The Accessibility is part of Kendo UI for jQuery, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
WAI-ARIA
The component follows the WAI-ARIA Authoring Practices for implementing the keyboard navigation for its component role and is tested against the popular screen readers. For more information, refer to the article on WAI-ARIA support in Kendo UI for jQuery.
The MultiSelect has three building blocks which, depending on the current state of the component and its options, use different aria properties on their nested elements:
- Search input—Filters the list of choices.
- Tag list—Displays the selected values.
- Items popup—Displays the list of items that can be selected.
Search Input
If the placeholder option is set, in order for screen readers to announce the placeholder text, the WAI-ARIA label attribute has to be manually toggled on the input element.
The MultiSelect implements the following WAI-ARIA roles, states, and properties for its search input:
| Role | Attribute | Usage |
|---|---|---|
listbox |
Identifies the popup with items. | |
aria-expanded |
Indicates the state of the popup with items - expanded or collapsed. | |
aria-haspopup |
Indicates that the component has a popup. | |
aria-autocomplete |
Indicates that the provided user input will display a popup that contains a list of values that could complete the provided input. | |
aria-describedby |
Identifies the tag list as the description object and allows screen readers to announce the selected options upon focusing them. | |
aria-busy |
Indicates if the component is in the process of loading data. | |
aria-disabled |
Indicates if the component is disabled. | |
aria-activedescendant |
Indicates the active element when navigating through the list of selected options. |
Tag List
In order for the screen readers to announce the selected options after deleting an item from the tag list:
- Enable the focusing of the option with the keyboard arrows.
- Enable the removal of the option by pressing the
BackspaceorDeletekeys.
The MultiSelect implements the following WAI-ARIA roles, states, and properties for its tag list:
| Role | Attribute | Usage |
|---|---|---|
listbox |
Identifies the list of selected options. | |
option |
Identifies each element which contains the name of an option. | |
aria-setsize |
Indicates the position of the option in the list. | |
aria-selected |
Indicates that the tag list item is selected. |
Items Popup
The MultiSelect implements the following WAI-ARIA roles, states, and properties for its items popup:
| Role | Attribute | Usage |
|---|---|---|
listbox |
Identifies the list of selected options. | |
option |
Identifies each element which contains the name of an option. | |
aria-selected |
Indicates that the tag list item is selected. |
Section 508
The MultiSelect is compliant with the Section 508 requirements. For more information, refer to the article on Section 508 support in Kendo UI for jQuery.
WCAG 2.1
The MultiSelect supports the standards for providing accessible web content which are set by the Web Content Accessibility Guidelines 2.1. For more information, refer to the article on WCAG 2.1 compliance in Kendo UI for jQuery