Accessibility in Blazor DatePicker Component

15 Dec 20224 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 components developed with Ajax, HTML, JavaScript, and related technologies.

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

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

It provides information about the widget for assistive technology to the disabled person in screen reader.

• aria-expanded: Attribute 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 following list of shortcut keys:

Input navigation

Before opening the pop-up, use the following list of keys to control the pop-up element:

Keys	Description
Alt + Down Arrow	Opens the popup.
Alt + Upper Arrow	Closes the popup.
Esc	Closes the popup.

Calendar navigation

Use the following list of keys to navigate the Calendar after the pop-up has been opened:

keys	Description
Upper 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 previous year.
Control + Upper Arrow	Moves into the inner level of view like month-year and year-decade
Control + Down Arrow	Moves out from the depth level view like decade-year and year-month
Control +Home	Focuses the starting date in the current year.
Control +End	Focuses the ending date in the current year.

NOTE

To focus out the DatePicker component, use the t keys. For additional information about native event, click here.

@using Syncfusion.Blazor.Calendars

<SfDatePicker TValue="DateTime?" @onkeypress="@(e => KeyPressed(e))" @ref="DateObj"></SfDatePicker>

@code {
    public SfDatePicker<DateTime?> DateObj;
    public void KeyPressed(KeyboardEventArgs args)
    {
        if (args.Key == "t")
        {
            this.DateObj.FocusOutAsync();
        }
    }
}