Accessibility in Blazor Breadcrumb

14 Aug 20264 minutes to read

The Blazor Breadcrumb component follows accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2, and WCAG roles that are commonly used to evaluate accessibility.

The accessibility compliance for the Blazor Breadcrumb 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 Breadcrumb component follows the WAI-ARIA patterns to meet accessibility standards. The following ARIA attributes are used in the Blazor Breadcrumb component:

Attributes Purpose
role="navigation" Identifies the Breadcrumb as a navigation landmark.
aria-label Provides an accessible name for the breadcrumb item.
aria-disabled Indicates whether the breadcrumb item is disabled.
aria-current="page" Identifies the breadcrumb item that represents the current page.

The following example shows how to set accessibility attributes on the Blazor Breadcrumb component:

@using Syncfusion.Blazor.Navigations

<SfBreadcrumb EnableNavigation="false" AriaLabel="Breadcrumb">
    <BreadcrumbItems>
        <BreadcrumbItem Text="Home" Url="https://www.syncfusion.com"></BreadcrumbItem>
        <BreadcrumbItem Text="Components" Url="https://www.syncfusion.com/blazor-components"></BreadcrumbItem>
        <BreadcrumbItem Text="Breadcrumb" Disabled="true"></BreadcrumbItem>
    </BreadcrumbItems>
</SfBreadcrumb>

Keyboard interaction

The Blazor Breadcrumb component follows the keyboard interaction guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor Breadcrumb component.

Windows Mac Actions
Tab Tab Navigate to the next item, and to the next item in the popup of the menu-type overflow.
Shift + Tab ⇧ + Tab Navigate to the previous item, and to the previous item in the popup of the menu-type overflow.
Enter Enter Select the breadcrumb item.
Enter on the collapsed button (overflow mode) Enter on the collapsed button (overflow mode) Open the popup when overflow mode is set to menu; expand the items when overflow mode is set to collapsed.

Ensuring accessibility

The Blazor Breadcrumb component’s accessibility levels are ensured through an axe-core with playwright tests.

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

See also