Accessibility in Blazor TimePicker Component

28 Apr 20255 minutes to read

The web accessibility makes web applications and its content more accessible to people with disabilities without any barriers. It especially tracks the dynamic value changes and DOM changes.

The Blazor TimePicker 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 TimePicker component is outlined below.

Accessibility Criteria Compatibility
WCAG 2.2 Support Yes
Section 508 Support Yes
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 TimePicker component has covered the WAI-ARIA specifications with the following list of WAI-ARIA attributes: aria-haspopup, aria-selected, aria-disabled, aria-activedescendant, aria-expanded, aria-owns, and aria-autocomplete.

In the TimePicker, the combobox plays the role of input element, and the listbox plays the role of popup element.

  • aria-haspopup: Provides the information about whether this element display a pop-up window or not.

  • aria-selected: Indicates the current selected value of the TimePicker component.

  • aria-disabled: Indicates disabled state of the TimePicker component.

  • aria-expanded: Indicates the expanded state of the popup.

  • aria-autocomplete: Indicates whether user input completion suggestions are provided or not.

  • aria-owns: Creates a parent/child relationship between two DOM element in the accessibility layer.

  • aria-activedescendent: Helps in managing the current active child of the TimePicker component.

  • role: Gives assistive technology information for handling each element in a widget.

Keyboard interaction

Keyboard accessibility is one of the most important aspects of web accessibility. Disabled people like blind and those who have motor disabilities or birth defects use keyboard shortcuts more than the mouse.

The Blazor TimePicker component has built-in keyboard accessibility support by following the WAI-ARIA practices.

NOTE

It supports the following list of shortcut keys to interact with the TimePicker component:

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 focusout the TimePicker component, use the t keys. For additional information about native event, click here.

@using Syncfusion.Blazor.Calendars

<SfTimePicker TValue="DateTime?" @onkeypress="@(e => KeyPressed(e))" @ref="TimeObj"></SfTimePicker>

@code {
    public SfTimePicker<DateTime?> TimeObj;
    public void KeyPressed(KeyboardEventArgs args)
    {
        if (args.Key == "t")
        {
            this.TimeObj.FocusOutAsync();
        }
    }
}

Ensuring accessibility

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

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

See also