Accessibility in Blazor DateTimePicker Component

4 Nov 20258 minutes to read

Web accessibility ensures that web content and applications are usable by people with disabilities, especially where dynamic content and advanced UI components are involved.

The Blazor DateTimePicker component follows accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2, and WAI-ARIA practices 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

The DateTimePicker provides built-in compliance with WAI-ARIA specifications to convey role, state, and property information to assistive technologies.

Common roles and attributes include:

  • Roles: combobox/textbox (for the input), dialog or popup container, grid for the calendar, and gridcell for individual dates.
  • aria-expanded: Indicates whether the popup (calendar/time list) is open or closed on the input/combobox element.
  • aria-disabled: Conveys the disabled state of the DateTimePicker.
  • aria-activedescendant: Identifies the currently focused date cell within the calendar grid or the focused item in the time list.

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

Keyboard interaction

Use the following keys to interact with the Blazor DateTimePicker. This component implements 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 + ↓ ⌥ + ↓ Opens the popup.
Alt + ↑ ⌥ + ↑ Closes the popup.

Calendar navigation

Use the following keys to interact with the Calendar after the DatePicker popup has opened:

Windows Mac Description
↑ ↑ Focuses the same day of the previous week.
↓ ↓ Focuses the same day of the next week.
← ← Focuses the previous day.
→ → Focuses the next day.
Home Home Focuses the first day of the month.
End End Focuses the last day of the month.
Page Up Page Up Focuses the same date of the previous month.
Page Down Page Down Focuses the same date of 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 next year.
Ctrl + ↑ ⌘ + ↑ Moves up one view (month → year, year → decade).
Ctrl + ↓ ⌘ + ↓ Moves down one view (decade → year, year → month).
Ctrl + Home ⌘ + Home Focuses the first date of the current year.
Ctrl + End ⌘ + End Focuses the last date of 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 toward the arrow direction.
→ → Moves the cursor toward the arrow direction.
Home Home Navigates and selects the first item.
End End Navigates and selects the last item.
Enter Enter Selects the focused item and closes the popup.
Alt + ↑ ⌥ + ↑ Closes the popup.
Alt + ↓ ⌥ + ↓ Opens the popup.
Esc Esc Closes the popup.

NOTE

The “t” key behavior in the following example is custom to the sample and not a built-in shortcut. For additional information about native events, see the Native events topic.

@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 validated using the axe-core 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 DateTimePicker component with accessibility tools.

See also