Accessibility in Blazor Chip Component

7 Aug 20264 minutes to read

The Blazor Chips 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 Chips 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.
Partial - Some features of the component do not meet the requirement.
No - The component does not meet the requirement.

WAI-ARIA attributes

The Blazor Chips component follows the WAI-ARIA patterns to meet accessibility requirements. The following ARIA attributes are used in the Chips component:

Attributes Purpose
role=listbox Indicates that the ChipList component wrapper element acts as a listbox, which contains a set of selectable options.
role=option Indicates each selectable chip within the ChipList (used when Selection is set to Single or Multiple).
aria-label Provides an accessible name for the Chip.
aria-selected Indicates whether the chip is currently selected.
aria-disabled Indicates the element is perceivable but disabled.
aria-multiselectable Indicates that multiple items in the ChipList can be selected at the same time.

Keyboard interaction

The following shortcut keys are used to access the Blazor Chip component seamlessly. To make the Delete key functional, set EnableDelete to true on the SfChip component. Focus order follows the order in which chips are rendered.

Windows Mac Actions
Enter Enter Selects the targeted chip from the Chip/ChipItems.
Delete Delete Deletes the targeted chip from the Chip/ChipItems.

Ensuring accessibility

The Blazor Chips component’s accessibility is validated through the axe-core software tool during automated testing.

The accessibility compliance of the Chip component is shown in the following sample. The sample references the local image files (andrew.png, janet.png, laura.png, margaret.png) that ship with the Syncfusion Blazor sample assets. The sample can be opened in a new window to evaluate the accessibility of the Chip component with accessibility tools.

@using Syncfusion.Blazor.Buttons
<SfChip ID="chip-avatar" EnableDelete="true" CssClass="e-chip-avatar" Selection="SelectionType.Single">
    <ChipItems>
        <ChipItem Text="Andrew" LeadingIconCss='andrew'></ChipItem>
        <ChipItem Text="Janet" LeadingIconCss='janet'></ChipItem>
        <ChipItem Text="Laura" LeadingIconCss='laura'></ChipItem>
        <ChipItem Text="Margaret" LeadingIconCss='margaret'></ChipItem>
    </ChipItems>
</SfChip>

<style>
    #chip-avatar .andrew {
        background-image: url('./andrew.png')
    }

    #chip-avatar .margaret {
        background-image: url('./margaret.png')
    }

    #chip-avatar .laura {
        background-image: url('./laura.png')
    }

    #chip-avatar .janet {
        background-image: url('./janet.png')
    }
</style>

Accessibility in Blazor Chip

See also