How can I help you?
Accessibility in Blazor MultiColumn ComboBox Component
17 Feb 20266 minutes to read
The Blazor MultiColumn ComboBox is designed in accordance with WAI-ARIA specifications and applies appropriate roles, states, and properties, along with robust keyboard support. The component offers complete keyboard interaction and ARIA support to assist users who rely on assistive technologies (AT) or keyboard navigation.
The Blazor 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 Blazor MultiColumn ComboBox component is outlined below.
| Accessibility Criteria | Compatibility |
|---|---|
| WCAG 2.2 Support | AA |
| Section 508 Support |  |
| Screen Reader Support | |
| Right-To-Left Support | |
| Color Contrast | |
| Mobile Device Support | |
| Keyboard Navigation Support | |
- All features of the component meet the requirement.
- Some features of the component do not meet the requirement.
- The component does not meet the requirement.WAI-ARIA attributes
The Blazor MultiColumn ComboBox uses the combobox pattern with an input (textbox), a popup listbox, and list options. The input applies the combobox role, the popup uses the listbox role, and each list item uses the option role. The following ARIA attributes denote the component state and relationships:
| Properties | Functionalities |
|---|---|
aria-haspopup |
Indicates that the input element opens a popup list. |
aria-expanded |
Indicates whether the popup list is expanded. |
aria-selected |
Indicates the selected option in the list. |
aria-readonly |
Indicates the read-only state of the input element. |
aria-disabled |
Indicates whether the component is disabled. |
aria-activedescendant |
Holds the ID of the active list item to convey focus within the popup list. |
aria-owns |
Identifies the popup element associated with the input when it is not a DOM descendant. |
aria-autocomplete |
Indicates the autocomplete behavior (for example, “both” to show a list of options and inline completion). |
Screen readers announce expanded and collapsed states, the active option while navigating, and the selected value when committed.
Keyboard interaction
Use the following key shortcuts to interact with the Blazor MultiColumn ComboBox:
| Windows | Mac | Actions |
|---|---|---|
| Focus | ||
| Alt + J | ⌥ + J | Focuses on the first component of the sample. |
| Input Navigation | ||
| Alt + ↓ | ⌥ + ↓ | Opens the popup list. |
| Alt + ↑ | ⌥ + ↑ | Closes the popup list. |
| Home | Home | Moves the cursor to the beginning of the input. |
| End | End | Moves the cursor to the end of the input. |
| Shift + Tab | ⇧ + 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. |
| Selection | ||
| Enter | Enter | Selects the focused item. When the popup is open, confirms selection and closes the list; otherwise, toggles the popup. |
| Popup Navigation | ||
| Esc(Escape) | Escape | Closes the popup when open and preserves the current selection. |
Ensuring accessibility
The Blazor MultiColumn ComboBox component’s accessibility is validated with the axe-core tool during automated testing.
The accessibility compliance of the MultiColumn ComboBox component is demonstrated in the following sample. Open the sample in a new window to evaluate accessibility with your preferred tools. The component also supports right-to-left (RTL) rendering and high-contrast themes for improved readability and usability.