Accessibility in Blazor Datetime Picker Component
7 Aug 20235 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.
DateTimePicker provides built-in compliance with the WAI-ARIA specifications. WAI-ARIA support is achieved through the attributes like aria-expanded
, aria-disabled
, aria-activedescendant
applied to the input element.
To learn about the accessibility of Calendar, refer to the Calendar’s Accessibility section.
It helps to provide 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 DateTimePicker component.
-
aria-activedescendent: Attribute helps in managing the current active child of the DateTimePicker component.
Keyboard interaction
You can use the following keys to interact with the DateTimePicker. The component implements the keyboard navigation support by following the WAI-ARIA practices.
DateTimePicker supports the below list of shortcut keys:
Input navigation
Before opening the popup, use the following keys to control the popup element.
Keys | Description |
---|---|
Alt + Down Arrow | Opens the select popup |
Alt + Down Arrow + Alt + Down Arrow | Toggles between two popups |
Calendar navigation
Use the following keys to interact with the Calendar after the DatePicker popup has 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, 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. |
Use the following shortcut keys to interact with the TimePicker after the TimePicker Popup has opened:
Keys | Description |
---|---|
Upper Arrow | Navigates and selects the previous item. |
Down Arrow | Navigates and selects the next item. |
Left Arrow | Moves the cursor towards arrow key pressed direction. |
Right Arrow | Moves the cursor towards arrow key pressed direction. |
Home | Navigates and selects the first item. |
End | Navigates and selects the last item. |
Enter | Selects the currently focused item and close the popup. |
Alt + Upper Arrow | Closes the popup. |
Alt + Down Arrow | Opens the popup. |
Esc | Closes the popup. |
NOTE
To focus out the DateTimePicker component, use the
t
keys. For additional information about native event, click here.
@using Syncfusion.Blazor.Calendars
<SfDateTimePicker TValue="DateTime?" @onkeypress="@(e => KeyPressed(e))" @ref="DateTimeObj"></SfDateTimePicker>
@code {
public SfDateTimePicker<DateTime?> DateTimeObj;
public void KeyPressed(KeyboardEventArgs args)
{
if (args.Key == "t")
{
this.DateTimeObj.FocusOutAsync();
}
}
}