Accessibility in Blazor AutoComplete Component

4 Nov 20258 minutes to read

The Blazor AutoComplete component is designed with WAI-ARIA guidance in mind and applies semantic roles, states, and properties along with comprehensive keyboard support. It provides strong screen reader and keyboard navigation support to assist users of assistive technologies (AT) and those who rely on the keyboard.

The Blazor AutoComplete component follows accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2, and WAI-ARIA specifications commonly used to evaluate accessibility.

The accessibility compliance for the Blazor AutoComplete 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 AutoComplete uses the combobox role for its input and the listbox role for its popup list; each list item has an option role. The following ARIA attributes convey state and relationships:

Property Functionalities
aria-haspopup Indicates that the input (combobox) has an associated popup list.
aria-expanded Reflects whether the popup list is open (true) or closed (false).
aria-selected Indicates the selected option within the listbox.
aria-readonly Indicates the read-only state of the input.
aria-disabled Indicates whether the component is disabled.
aria-activedescendant Identifies the ID of the active (focused) option within the listbox.
aria-owns References the ID of the popup listbox the combobox controls.
aria-autocomplete Indicates the autocomplete behavior; typically list or both when inline completion is shown along with a list.

Keyboard interaction

Use the following key shortcuts to operate the AutoComplete with the keyboard:

Windows Mac Actions
Focus    
Alt + J ⌥ + J Focuses the first component in the sample.
Input Navigation    
Alt + ↓ ⌥ + ↓ Opens the popup list.
Alt + ↑ ⌥ + ↑ Closes the popup list.
Tab Tab Focuses on the next TabIndex element on the page when the popup is closed. Otherwise, closes the popup list and remains the focus of the component.
Shift + Tab ⇧ + Tab Focuses on the previous TabIndex element on the page when the popup is closed. Otherwise, closes the popup list and remains the focus of the component.
Selection    
Enter Enter Selects the focused item; when closed, toggles or confirms the value based on context.
Popup Navigation    
Esc Escape Closes the popup list; the current selection remains unchanged.
↓ ↓ When no item is selected, moves to the first item; otherwise, moves to the next item.
↑ ↑ Moves to the previous item.
Page Down Page Down Scrolls down a page and focuses the first visible item.
Page Up Page Up Scrolls up a page and focuses the first visible item.
Home Home Moves focus to the first item.
End End Moves focus to the last item.

NOTE

In the following sample, pressing the t key toggles the disabled state of the AutoComplete. This is a sample-specific behavior, not a built-in shortcut.

  • CSHTML
    • @using Syncfusion.Blazor.DropDowns

<SfAutoComplete TValue="string" TItem="Country" @ref="AutoObj" Placeholder="Select a country" Enabled="@enable" @onkeypress="@(e => KeyPressed(e))" DataSource="@LocalData">
    <AutoCompleteFieldSettings Value="Name"></AutoCompleteFieldSettings>
</SfAutoComplete>

@code {

    public SfAutoComplete<string, Country> AutoObj;

    public bool enable { get; set; } = true ;
    public class Country
    {
        public string Name { get; set; }
        public string Code { get; set; }
    }

    List<Country> LocalData = new List<Country> {
        new Country() { Name = "Australia", Code = "AU" },
        new Country() { Name = "Bermuda", Code = "BM" },
        new Country() { Name = "Canada", Code = "CA" },
        new Country() { Name = "Cameroon", Code = "CM" },
        new Country() { Name = "Denmark", Code = "DK" },
        new Country() { Name = "France", Code = "FR" },
        new Country() { Name = "Finland", Code = "FI" },
        new Country() { Name = "Germany", Code = "DE" },
        new Country() { Name = "Greenland", Code = "GL" },
        new Country() { Name = "Hong Kong", Code = "HK" },
    };

    public void KeyPressed(KeyboardEventArgs args)
    {
        if (args.Key == "t")
        {
            enable = false;
        }
    }
}

    Ensuring accessibility

    The Blazor AutoComplete component’s accessibility levels are validated using the axe-core tool during automated testing.

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

    See also