Accessibility in EJ2 JavaScript Calendar

4 Sep 20268 minutes to read

The Calendar 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 Calendar 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 makes web content and web applications more accessible for people with disabilities. It especially helps in dynamic content changes and the development of advanced user interface controls with AJAX, HTML, JavaScript, and related technologies.

The Calendar provides built-in compliance with WAI-ARIA specifications. WAI-ARIA support is achieved through attributes like aria-label, aria-selected, aria-disabled, and aria-activedescendant applied for navigation buttons, disabled and active day cells.

These attributes convey the widget information to assistive technologies in screen readers. The Calendar component contains the grid role and grid cell for each day cell.

  • Aria-label: This attribute provides text labels for the previous and next month elements. It helps the screen reader to read them aloud.

  • Aria-selected: Indicates the currently selected date of the Calendar component.

  • Aria-disabled: Indicates the disabled state of the Calendar component.

  • Aria-activedescendant: Helps in managing the current active child of the Calendar component.

  • Role: Gives information to assistive technologies about how to handle each element in a widget.

  • Grid-cell: Defines the individual cell that can be focused and selected.

Keyboard interaction

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

It supports the following list of shortcut keys:

Press To do this
Up Arrow Focuses the same day of the previous week.
Down Arrow Focuses the same day of the next week.
Left Arrow Focuses the day before.
Right Arrow Focuses the next day.
Home Focuses the first day of the month.
End Focuses the last day of the month.
Page Up Focuses the same date of the previous month.
Page Down Focuses the same date of the next month.
Enter Selects the currently focused date.
Shift + Page Up Focuses the same date for the previous year.
Shift + Page Down Focuses the same date for the next year.
Control + Up Arrow Moves to the inner level of view like month to year and year to decade.
Control + Down Arrow Moves out from the depth level view like decade to year and year to month.
Control + Home Focuses the first date of the current year.
Control + End Focuses the last date of the current year.

To focus the Calendar component, use the alt+t keys.

ej.base.enableRipple(true);
   
   var calendar = new ej.calendars.Calendar({  
    });
    document.onkeyup = function (e) {
    if (e.altKey && e.keyCode === 84) {
        // press alt+t to focus the control.
       calendar.element.querySelectorAll('.e-content table')[0].focus()
    }
    }
    calendar.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Calendar 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">
    <!--style reference from the Calendar component-->
    <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-calendars/styles/material.css" rel="stylesheet">
    <!--style reference from app-->
    <link href="styles.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">
        <!--element which is going to render the Calendar-->
        <div id="element"></div>
    </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 Calendar component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.

The accessibility compliance of the Calendar 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