Accessibility in Blazor Sidebar Component

10 Jun 20242 minutes to read

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

WAI-ARIA attributes

The Blazor Sidebar component followed the WAI-ARIA patterns to meet accessibility standards. By default, the Sidebar utilizes the complementary role, with the option to modify the ARIA role based on provided attributes to the root element, depending on the specific use case.

If there are multiple complementary landmark roles or aside elements in a document, it is important to provide a label for each landmark using the aria-label attribute. Alternatively, if the aside has a descriptive title, it can be referenced using the aria-labelledby attribute. This label will help assistive technology users quickly understand the purpose of each landmark.

For optimal accessibility, it is recommended to incorporate a trigger component that is navigable via a keyboard, such as a button. If this is not feasible, inclusion of the tabIndex attribute becomes necessary. Furthermore, explicit handling of the aria-expanded attribute is required for the trigger element.

Keyboard interaction

The Blazor Sidebar component does not have any inbuilt keyboard interaction support. However, you can utilize the keyboard interactions of focusable elements within the Sidebar component.

Ensuring accessibility

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

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

See also