Accessibility in Blazor TimePicker

14 Aug 20266 minutes to read

Web accessibility makes web applications and their content more accessible to people with disabilities by removing barriers that can prevent interaction. The TimePicker is designed to surface dynamic value changes and DOM updates to assistive technologies in a predictable way.

The Blazor TimePicker component follows 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 AA
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 the input element, and the listbox plays the role of the popup element. For the full pattern specification, see the WAI-ARIA Combobox Pattern.

  • aria-haspopup: Indicates whether this element displays a pop-up window.

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

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

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

  • aria-autocomplete: Indicates whether input completion suggestions are provided to the user.

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

  • aria-activedescendant: 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. Many users, including people who are blind, have low vision, or have motor disabilities, rely on keyboard shortcuts rather than the mouse to interact with applications.

The Blazor TimePicker component has built-in keyboard accessibility support that follows the WAI-ARIA Authoring Practices for a combobox pattern.

NOTE

The following table lists the built-in shortcut keys supported by the TimePicker component:

Windows Mac Description
↑ ↑ Navigates and selects the previous item.
↓ ↓ Navigates and selects the next item.
← ← Moves the cursor in the direction of the pressed arrow key.
→ → Moves the cursor in the direction of the pressed arrow key.
Home Home Navigates and selects the first item.
End End Navigates and selects the last item.
Enter Enter Selects the currently focused item and closes the popup.
Alt + ↑ ⌥ + ↑ Closes the popup.
Alt + ↓ ⌥ + ↓ Opens the popup.
Esc Esc Closes the popup.

NOTE

The example below wires a native onkeypress event so that pressing the t key calls FocusOutAsync(). The t key is only the key checked in the sample handler and is not a built-in TimePicker shortcut — replace "t" in the handler to use a different key. For more information, see Native Events in Blazor TimePicker.

@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 is verified through the axe-core software tool during automated testing.

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

See also