Accessibility in Angular Calendar

31 Aug 20269 minutes to read

The Calendar component follows 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 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

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 support is achieved through the attributes like aria-label,aria-selected, aria-disabled, aria-activedescendant applied for navigation buttons, disabled and active day cells.

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

The following table lists the WAI-ARIA attributes and roles applied to the Calendar component.

Attribute / Role Description
aria-label Provides the text label for the previous and next month navigation elements. It enables screen readers to announce the element.
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=grid Gives assistive technologies information about how to handle the Calendar container element.
gridcell Defines the individual day cell that can be focusable and selectable.

A sample of the rendered WAI-ARIA structure is shown below.

<div role="grid" aria-label="Calendar">
    <div role="presentation">
        <button aria-label="Previous month">‹</button>
        <span aria-label="January 2026">January 2026</span>
        <button aria-label="Next month">›</button>
    </div>
    <div role="row">
        <div class="e-day" role="gridcell" aria-selected="true">1</div>
        <div class="e-day" role="gridcell" aria-disabled="true">2</div>
        <div class="e-day" role="gridcell" aria-activedescendant="e-datepicker-content">3</div>
    </div>
</div>

Keyboard Interaction

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

It supports the below list of shortcut keys.

Press To do this
Up 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 + Up Arrow Move into the inner level of the view like month-year, year-decade
Control + Down Arrow Move 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. The above shortcut keys work only after the Calendar component receives focus.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CalendarModule } from '@syncfusion/ej2-angular-calendars'



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

@Component({
imports: [
        
        CalendarModule //declaration of ej2-angular-calendars module into NgModule
    ],


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

export class AppComponent {
   @ViewChild('ejCalendar') ejCalendar: any;
    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 { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

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 accessibility of the Calendar component with accessibility tools.

See also