Accessibility in Angular Datetimepicker component
27 Apr 20249 minutes to read
The DateTimePicker 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 DateTimePicker component is outlined below.
WAI-ARIA attributes
The Web accessibility defines a way to make web content and web applications more accessible to disabled people. It especially helps the dynamic content change and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies.
DateTimePicker provides built-in compliance with the WAI-ARIA specifications. WAI-ARIA supports is achieved through the attributes like aria-expanded
, aria-disabled
, aria-activedescendant
applied to the input element.
To know about the accessibility of Calendar refer to the Calendar’s Accessibility section.
It helps to provide information about the widget for assistive technology to the disabled person in
screen reader.
-
Aria-expanded: attributes indicates the state of a collapsible element.
-
Aria-disabled: attribute indicates the disabled state of this DateTimePicker component.
-
Aria-activedescendent: attribute helps in managing the current active child of the DateTimePicker component.
Keyboard Interaction
You can use the following keys to interact with the DateTimePicker.
The component implements the keyboard navigation support by following the WAI-ARIA practices.
DateTimePicker supports the below list of shortcut keys.
Input Navigation
Before opening the popup, use the below list of keys to DateTimePicker
component the popup element.
Press | To do this |
---|---|
Alt + Down Arrow | Open the select popup |
Alt + Down Arrow + Alt + Down Arrow | Toggle between two popup |
Calendar Navigation
Use the below list of keys to interact with the Calendar after the DatePicker popup has opened.
Press | To do this |
---|---|
Upper Arrow | Focus the previous week date. |
Down Arrow | Focus the next week date. |
Left Arrow | Focus the previous date. |
Right Arrow | Focus the next date. |
Home | Focus the first date in the month. |
End | Focus the last date in the month. |
Page Up | Focus the same date in the previous month. |
Page Down | Focus the same date in the next month. |
Enter | Select the currently focused date. |
Shift + Page Up | Focus the same date in the previous year. |
Shift + Page Down | Focus the same date in the previous year. |
Control + Upper Arrow | Moves into the inner level of view like month-year, year-decade |
Control + Down Arrow | Moves out from the depth level view like decade-year, year-month |
Control + Home | Focus the starting date in the current year. |
Control + End | Focus the ending date in the current year. |
Use the below list of shortcut keys to interact with the TimePicker after the TimePicker Popup has opened.
Press | To do this |
---|---|
Upper Arrow | Navigate and select the previous item. |
Down Arrow | Navigate and select the next item. |
Left Arrow | Move the cursor towards arrow key pressed direction. |
Right Arrow | Move the cursor towards arrow key pressed direction. |
Home | Navigate and select the first item. |
End | Navigate and select the last item. |
Enter | Select the currently focused item and close the popup. |
Alt + Upper Arrow | Close the popup. |
Alt + Down Arrow | Open the popup. |
Esc | Close the popup. |
To focus the DateTimePicker component use the
alt+t
keys.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { DateTimePickerModule } from '@syncfusion/ej2-angular-calendars'
import { Component, HostListener, ViewChild } from "@angular/core";
import { DateTimePickerComponent } from "@syncfusion/ej2-angular-calendars";
@Component({
imports: [
DateTimePickerModule,
FormsModule
],
standalone: true,
selector: 'app-root',
template: `<ejs-datetimepicker #ejDateTimePicker placeholder='Select a date and time'></ejs-datetimepicker>`
})
export class AppComponent {
@ViewChild("ejDateTimePicker") ejDateTimePicker?: DateTimePickerComponent;
@HostListener("document:keyup", ["$event"])
handleKeyboardEvent(event: KeyboardEvent) {
if (event.altKey && event.keyCode === 84 /* t */) {
// press alt+t to focus the component.
this.ejDateTimePicker?.focusIn();
}
}
constructor() {}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Ensuring accessibility
The DateTimePicker component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.
The accessibility compliance of the DateTimePicker component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the DateTimePicker component with accessibility tools.