Accessibility in Blazor DateTime Picker

14 Aug 20268 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 AA
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: Indicates the disabled state of the DateTimePicker.
  • aria-activedescendant: Indicates 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. The component implements keyboard navigation support by following the WAI-ARIA practices.

The following shortcut keys are supported:

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.
Esc Esc Closes the popup.

Calendar navigation

Use the following keys to interact with the Calendar after the DateTimePicker 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 time list after the 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 example below 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 ensured through the axe-core tool during automated testing.

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

See also