Accessibility in EJ2 JavaScript DatePicker

4 Sep 20268 minutes to read

The DatePicker component follows the 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 DatePicker component is outlined below.

Accessibility Criteria Compatibility
WCAG 2.2 Support Intermediate
Section 508 Support Intermediate
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

Web accessibility defines a way to make web content and web applications more accessible to people with disabilities. It especially helps in dynamic content changes and advanced user interface controls developed with AJAX, HTML, JavaScript, and related technologies.

The DatePicker provides built-in compliance with the WAI-ARIA specifications. WAI-ARIA
support is achieved through the attributes like aria-expanded, aria-disabled, and aria-activedescendant applied to the input element.

To know about the accessibility of Calendar, refer to the Calendar’s Accessibility section.

These attributes help provide information about the widget for assistive technology to the disabled person in screen reader.

  • Aria-expanded: This attribute indicates the state of a collapsible element.

  • Aria-disabled: This attribute indicates the disabled state of the DatePicker component.

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

Keyboard interaction

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

It supports the following list of shortcut keys.

Input Navigation

Before opening the popup, the below list of keys can be used 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

The below list of keys can be used to navigate the Calendar after the popup has opened.

Press To do this
Up Arrow Focuses the previous week date.
Down Arrow Focuses the next week date.
Left Arrow Focuses the previous date.
Right Arrow Focuses the next date.
Home Focuses the first date in the month.
End Focuses the last date in the month.
Page Up Focuses the same date in the previous month.
Page Down Focuses the same date in the next month.
Enter Selects the currently focused date.
Shift + Page Up Focuses the same date in the previous year.
Shift + Page Down Focuses the same date in the next year.
Control + Up 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 Focuses the starting date in the current year.
Control + End Focuses 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.
        datepicker.element.focus();
    }
};

    datepicker.appendTo('#element');
<!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="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-calendars/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <input id="element" type="text">
    </div>
    
<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Ensuring accessibility

The accessibility levels of the DatePicker component are ensured through an accessibility-checker and axe-core software tools during automated testing.

The accessibility compliance of the DatePicker component is shown in the following sample. Open the sample in a new window to evaluate the component’s accessibility with accessibility tools.

See also