Accessibility in Blazor ListBox Component
4 Nov 20254 minutes to read
The Blazor ListBox component followed the accessibility guidelines and standards, including ADA, Section 508, and WCAG 2.2. It also implements appropriate WCAG roles to support assistive technologies.
The following table summarizes the accessibility compliance of the Blazor ListBox component.
| Accessibility Criteria | Compatibility |
|---|---|
| WCAG 2.2 Support |  |
| Section 508 Support | |
| Screen Reader Support | |
| Right-to-left support | |
| Color Contrast | |
| Mobile Device Support | |
| Keyboard Navigation Support | |
| Axe-core Accessibility Validation | |
- 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 ListBox component follows the WAI-ARIA listbox pattern to meet accessibility requirements. The following ARIA attributes are used in the Blazor ListBox component:
| Attributes | Purpose |
|---|---|
role |
Indicates the ListBox component wrapper element as listbox, the ul element as presentation, and each list item as option. |
aria-label |
Provides an accessible name for the ListBox component. |
aria-multiselectable |
Applied to the element with the listbox role to indicate that multiple selection is supported. This is applied when multiple selection is enabled (default behavior). |
aria-selected |
Applied to elements with the option role that are visually styled as selected to inform assistive technologies that the options are selected. |
Keyboard interaction
The Blazor ListBox component follows the keyboard interaction guidelines, supporting users of assistive technologies and those who rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor ListBox component.
| Windows | Mac| Actions |
| — | — | — |
| ↑ | ↑ | Moves focus to the previous option. |
| ↓ | ↓ | Moves focus to the next option. |
| Home | Home | Moves focus to the first option. |
| End | End | Moves focus to the last option. |
| Space | Space | Toggles the selection state of the focused option. |
| Ctrl + A | ⌘ + A | Selects all options in the list. |
| Ctrl + Shift + Home | ⌘ + ⇧ + Home | Selects the focused option and all options up to the first option. |
| Ctrl + Shift + End | ⌘ + ⇧ + End | Selects the focused option and all options down to the last option. |
| Ctrl + ↑ or ↓ | ⌘ + ↑ or ↓ | Moves focus without changing the current selection. Use Ctrl/Cmd with mouse click to toggle individual items. |
Ensuring accessibility
The Blazor ListBox component’s accessibility levels are validated using axe-core with Playwright tests.
The accessibility compliance of the Blazor ListBox component is demonstrated in the following sample. Open the sample in a new window to evaluate the component with accessibility tools.