Accessibility in Blazor DatePicker Component

6 Aug 20267 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 DatePicker component follows 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 DatePicker 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 Blazor DatePicker provides built-in compliance with the WAI-ARIA specifications. The following WAI-ARIA attributes are applied to the input element to convey the component’s state to assistive technologies through screen readers. To learn more about the accessibility of the Calendar (including popup-level attributes such as role and aria-modal), refer to the Calendar’s Accessibility section.

The component’s aria-disabled state reflects the Enabled property.

  • aria-expanded: Indicates whether the popup is open or collapsed.

  • aria-disabled: Indicates the disabled state of the DatePicker component, reflecting the Enabled property.

  • aria-activedescendant: Identifies the currently focused child element (such as the active date) inside the DatePicker popup.

Keyboard interaction

The Blazor DatePicker implements keyboard navigation support by following the WAI-ARIA practices. You can use the following keys to interact with the DatePicker.

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 navigate the Calendar after the popup has been 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 next year.
Ctrl + ↑ ⌘ + ↑ Moves into the inner level of view like month-year and year-decade.
Ctrl + ↓ ⌘ + ↓ Moves out from the depth level view like decade-year and year-month.
Control + Home ⌘ + Home Focuses the starting date in the current year.
Ctrl + End ⌘ + End Focuses the ending date in the current year.

NOTE

To demonstrate custom keyboard interaction, the following example shows how to press the t key (lowercase) to move focus out of the DatePicker component. This is a user-defined example and not a built-in shortcut. For additional information about native events, see Native Events.

@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();
        }
    }
}

Ensuring accessibility

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

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

See also