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:

The Accessibility is part of Telerik UI for ASP.NET Core, 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.

Download Free Trial

• Keyboard navigation by the Telerik UI MultiSelect
• Accessibility in Telerik UI for ASP.NET Core

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 UI for ASP.NET Core.

The MultiSelect provides the following building blocks which, depending on its current state and 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 and in order for screen readers to announce the placeholder text, you have to manually toggle the WAI-ARIA label attribute 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 MultiSelect has a popup.
	aria-autocomplete	Indicates that the provided user input will display a popup that contains a list of values which can 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 MultiSelect is in the process of loading data.
	aria-disabled	Indicates if the MultiSelect 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 Telerik UI for ASP.NET Core.

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 UI for ASP.NET Core

See Also

• Keyboard Navigation by the MultiSelect HtmlHelper for ASP.NET Core (Demo)
• Keyboard Navigation by the MultiSelect HtmlHelper for ASP.NET Core
• Accessibility in Telerik UI for ASP.NET Core