Accessibility in Angular Calendar component

17 Nov 20225 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.

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

It helps to provide the information about the widget for assistive technology to the disabled person in the screen reader. Calendar component contains grid as role and grid cell for each day cell

  • Aria-label : attribute provides the text label for an object for the previous and next month element. It helps the screen reader object to read for the assistive purpose.

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

  • Aria-disabled : attribute indicates the disabled state of this Calendar component.

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

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

  • Grid-cell : attributes define the individual cell that can be focusable and selectable.

Keyboard Interaction

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

It supports the below list of shortcut keys.

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 next 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 Calendar component use the alt+t keys.

import { Component,HostListener,ViewChild } from '@angular/core';

    selector: 'app-root',
    template: `
        <ejs-calendar #ejCalendar [value]='dateValue'></ejs-calendar>

export class AppComponent {
   @ViewChild('ejCalendar') ejCalendar: CalendarComponent;
    public dateValue: Date = new Date();
    @HostListener('document:keyup', ['$event'])
  handleKeyboardEvent(event: KeyboardEvent) {
    if (event.altKey && event.keyCode === 84) {
        // press alt+t to focus the control.
        this.ejCalendar.element.querySelectorAll('.e-content table')[0].focus();
    constructor() {
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
//Syncfusion ej2-angular-calendars module
import { CalendarModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';

 * Module
    imports: [
        CalendarModule //declaration of ej2-angular-calendars module into NgModule
    declarations: [AppComponent],
    bootstrap: [AppComponent]
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';