Accessibility in DropDown List
4 Nov 20256 minutes to read
The Blazor DropDownList component is built to align with WAI-ARIA specifications, applying appropriate roles, states, and properties alongside comprehensive keyboard support. It provides full keyboard interaction and ARIA compatibility to ensure a consistent experience for users of assistive technologies and for those who rely on keyboard navigation.
The Blazor DropDownList component follows recognized accessibility standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles commonly used to evaluate accessibility.
The accessibility compliance for the DropDownList component is outlined below.
| 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 fully meet the requirement.
- The component does not meet the requirement.WAI-ARIA attributes
The Blazor DropDownList component uses the combobox pattern. The following ARIA attributes convey the component’s state and relationships:
| Properties | Functionalities |
|---|---|
aria-haspopup |
Indicates that the input has an associated popup list. |
aria-expanded |
Indicates whether the popup list is expanded. |
aria-selected |
Indicates the selected option in the list. |
aria-readonly |
Indicates the readonly state of the input. |
aria-disabled |
Indicates whether the component is disabled. |
aria-activedescendant |
Holds the ID of the active list item to identify the focused descendant. |
aria-owns |
Contains the ID of the popup list to indicate the popup as a child element. |
Keyboard interaction
Use the following keys to operate the Blazor DropDownList by keyboard:
| Windows | Mac | Actions |
|---|---|---|
| Focus | ||
| Alt + J | ⌥ + J | Focuses on the first component of the sample (sample-page shortcut; availability may vary). |
| Input Navigation | ||
| Alt + ↓ | ⌥ + ↓ | Opens the popup list. |
| Alt + ↑ | ⌥ + ↑ | Closes the popup list. |
| Tab | 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 | ⇧ + 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, it closes after selection; otherwise, toggles the popup. |
| Popup Navigation | ||
| Escape | Esc | Closes the popup when it is open; the current selection remains unchanged. |
| ↓ | ↓ | Selects the first item if none is selected; otherwise selects the next item. |
| ↑ | ↑ | Selects the previous item. |
| Page Down | Page Down | Scrolls down one page and selects the first visible item when the popup is open. |
| Page Up | Page Up | Scrolls up one page and selects the first visible item when the popup is open. |
| Home | Home | Selects the first item. |
| End | End | Selects the last item. |
Ensuring accessibility
The Blazor DropDownList component’s accessibility is validated using the axe-core tool during automated testing.
The accessibility compliance of the DropDownList component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the DropDownList component with accessibility tools.