Accessibility in Blazor Datetime Picker Component

2 May 20258 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 Blazor DateTimePicker component followed 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 Blazor DateTimePicker 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
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

Blazor 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 Blazor DateTimePicker. This component implements the keyboard navigation support by following the WAI-ARIA practices.

Blazor DateTimePicker supports the below list of shortcut keys:

Input navigation

Before opening the popup, use the following keys to control the popup element.

Windows Mac 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:

Windows Mac Description
↑ ↑ Focuses the previous week date.
↓ ↓ Focuses the next week date.
← ← Focuses the previous date.
→ → Focuses the next date.
Home Home Focuses the first date in the month.
End End Focuses the last date in the month.
Page Up Page Up Focuses the same date in the previous month.
Page Down Page Down Focuses the same date in the next month.
Enter Enter Selects the currently focused date.
Shift + Page Up ⇧ + Page Up Focuses the same date in the previous year.
Shift + Page Down ⇧ + Page Down Focuses the same date in the previous year.
Ctrl + + ↑ ⌘ + ↑ Moves into the inner level of view like month-year, year-decade
Ctrl + ↓ ⌘ + ↓ Moves out from the depth level view like decade-year, year-month
Control +Home ⌘ + Home Focuses the starting date in the current year.
Control +End ⌘ + 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:

Windows Mac Description
↑ ↑ Navigates and selects the previous item.
↓ ↓ Navigates and selects the next item.
← ← Moves the cursor towards arrow key pressed direction.
→ → Moves the cursor towards arrow key pressed direction.
Home Home Navigates and selects the first item.
End End Navigates and selects the last item.
Enter Enter Selects the currently focused item and close the popup.
Alt + ↑ ⌥ + ↑ Closes the popup.
Alt + ↓ ⌥ + ↓ Opens the popup.
Esc 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();
        }
    }
}

Ensuring accessibility

The Blazor DateTimePicker component’s accessibility levels are ensured through an axe-core software tool during automated testing.

The accessibility compliance of the DateTimePicker component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the DateTimePicker component with accessibility tools.

See also