MultiSelect Accessibility

The MultiSelect is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support.

For more information, refer to:

Kendo UI for jQuery Kendoka image

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.

Kendo UI for jQuery MultiSelect Structure

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:

  1. Enable the focusing of the option with the keyboard arrows.
  2. Enable the removal of the option by pressing the Backspace or Delete keys.

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.2

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.2 compliance in Kendo UI for jQuery

See Also

In this article