Accessibility in EJ2 JavaScript Datepicker control

26 Apr 20236 minutes to read

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.

DatePicker 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 DatePicker component.

  • Aria-activedescendent: attribute helps in managing the current active child of the DatePicker component.

Keyboard Interaction

You can use the following keys to interact with the DatePicker. The component implements the keyboard navigation support by following the WAI-ARIA practices.

It supports the below list of shortcut keys.

Input Navigation

Before opening the popup, use the below list of keys to
control the popup element.

Press To do this
Alt + Down Arrow Opens the popup.
Alt + Up Arrow Closes the popup.
Esc closes the popup.

Calendar Navigation

Use the below list of keys to navigate the Calendar after the 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.

To focus the DatePicker component use the alt+t keys.

var datepicker = new ej.calendars.DatePicker({
        placeholder: 'Choose a date'      

    document.onkeyup = function (e) {
    if (e.altKey && e.keyCode === 84 /* t */) {
        // press alt+t to focus the component.

<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 DatePicker control</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="" rel="stylesheet">
    <link href="" rel="stylesheet">
    <link href="" rel="stylesheet">
    <link href="" rel="stylesheet">
    <link href="" rel="stylesheet">
<script src="" type="text/javascript"></script>
<script src="" type ="text/javascript"></script>

    <div id="container">
        <input id="element" type="text">

var ele = document.getElementById('container');
if(ele) { = "visible";
<script src="index.js" type="text/javascript"></script>