Accessibility in Angular Drop down list component

18 Oct 20258 minutes to read

The DropDownList component is designed with WAI-ARIA specifications, applying the necessary roles, states, and properties to support keyboard interaction. This ensures that the component is fully accessible to users who rely on assistive technologies (AT) or keyboard navigation.

The DropDownList component adheres to accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WAI-ARIA roles that are commonly used to evaluate accessibility.

The accessibility compliance for the DropDownList 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 component’s design implements the listbox role for the main wrapper and the option role for each item in the popup list. The following ARIA attributes provide detailed information about the DropDownList’s state for assistive technologies.

Properties Functionalities
aria-haspopup Announces to assistive technologies that the component’s input element will trigger a popup list.
aria-expanded Communicates the current state (expanded or collapsed) of the popup list.
aria-selected Identifies the currently selected item within the list, ensuring the user knows their choice.
aria-readonly Specifies that the DropDownList is in a read-only state, preventing user interaction.
aria-disabled Informs assistive technologies that the DropDownList is disabled and not interactive.
aria-activedescendent Holds the ID of the currently focused list item, allowing assistive technologies to track keyboard focus as the user navigates the popup.
aria-owns Programmatically links the input element to the popup list, establishing a parent-child relationship for screen readers.

Keyboard Interaction

You can use the following key shortcuts to interact with the DropDownList component.

Keyboard shortcuts Actions
Down Arrow If no item is selected, selects the first item in the DropDownList. Otherwise, moves focus to the next item.
Up Arrow Moves focus to the previous item.
Page Down When the popup is open, scrolls down one page and selects the first item in the visible view.
Page Up When the popup is open, scrolls up one page and selects the first item in the visible view.
Enter Toggles the popup list. If the popup is open, it selects the focused item and closes the popup.
Tab If the popup is closed, moves focus to the next focusable element. If the popup is open, it closes the popup, and focus remains on the component.
Shift + Tab If the popup is closed, moves focus to the previous focusable element. If the popup is open, it closes the popup, and focus remains on the component.
Alt + Down Arrow Opens the popup list.
Alt + Up Arrow Closes the popup list.
Escape Closes the popup list if it is open, retaining the currently selected item.
Home Selects the first item in the list.
End Selects the last item in the list.
A-Z or 0-9 Jumps to the next list item that starts with the typed character.

In the following sample, alt+t keys are used to focus the DropDownList component.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'



import { Component, HostListener, ViewChild } from '@angular/core';
import { DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns';

@Component({
imports: [
        FormsModule, ReactiveFormsModule, DropDownListModule, ButtonModule
    ],


standalone: true,
    selector: 'app-root',
    // specifies the template string for the DropDownList component with change event
    template: `<ejs-dropdownlist id='ddlelement' #samples [dataSource]='data' [placeholder]='text' [popupHeight]='height'></ejs-dropdownlist>`
})
export class AppComponent {
    @ViewChild('samples')
    public sports?: DropDownListComponent;
    constructor() {
    }
    // defined the array of data
    public data: string[] = ['Badminton', 'Basketball', 'Cricket', 'FootBall', 'Golf', 'Hockey', 'Rugby', 'Snooker', 'Tennis'];
    // set placeholder to DropDownList input element
    public text: string = "Select a game";
    // set the popup list height
    public height: string = '200px';
    @HostListener('document:keyup', ['$event'])
    handleKeyboardEvent(event: KeyboardEvent) {
        if (event.altKey && event.keyCode === 84 /* t */) {
            // press alt+t to focus the control.
            this.sports!.focusIn();
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Ensuring accessibility

The DropDownList component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools 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.

See also