Accessibility in React MultiColumn ComboBox component

17 Mar 20255 minutes to read

The MultiColumn ComboBox component followed the accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.

The accessibility compliance for the MultiColumn ComboBox component is outlined below.

Accessibility Criteria Compatibility
WCAG 2.2 Support Yes
Section 508 Support Yes
Screen Reader Support Yes
Right-To-Left Support Yes
Color Contrast Yes
Mobile Device Support Yes
Keyboard Navigation Support Yes
Accessibility Checker Validation Yes
Axe-core Accessibility Validation Yes
Yes - All features of the component meet the requirement.
Intermediate - Some features of the component do not meet the requirement.
No - The component does not meet the requirement.

WAI-ARIA attributes

The following ARIA attributes are used in the MultiColumn ComboBox component:

Attributes Purpose
role=combobox Identifies an input element that controls another element, like a listbox or grid, which can pop up to help the user set its value.
aria-expanded Indicates whether the popup list has expanded or not.
aria-selected Indicates the selected option.
aria-readonly Indicates the readonly state of the MultiColumn ComboBox component.
aria-disabled Indicates whether the MultiColumn ComboBox component is in a disabled state or not.
aria-owns This attribute contains the ID of the popup list to indicate popup as a child element.

Keyboard interaction

The following keyboard shortcuts are supported by the MultiColumn ComboBox component.

Press To do this
Enter Selects the focused item and popup list closes when it is in open state.
Esc Closes the popup list when it is in an open state and the currently selected item remains the same.
Alt +down Opens the popup list.
Alt + Up Closes the popup list.
Arrow Up Selects the item previous to the currently selected one.
Arrow Down Selects the first item in the MultiColumn ComboBox when no item selected. Otherwise, selects the item next to the currently selected item.
Home  Selects the first item in the popup list.
End Selects the last item in the popup list.
Tab Focuses on the next TabIndex element on the page when the popup is closed. Otherwise, closes the popup list and remains the focus of the component.
Shift + Tab Focuses on the previous TabIndex element on the page when the popup is closed. Otherwise, closes the popup list and remains the focus of the component.

Ensuring accessibility

The MultiColumn ComboBox component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.

See also