Accessibility in Blazor Carousel

27 Aug 20265 minutes to read

The Blazor Carousel component is designed in accordance with the WAI-ARIA specification, applying the appropriate roles, states, and properties along with keyboard support. This makes it usable for people who rely on assistive technologies. The accessibility support is achieved through attributes like aria-label, aria-current, aria-live, role, and aria-hidden, which provide information about the elements in a document to assistive technology. The component implements keyboard navigation support by following the WAI-ARIA practices and has been tested with major screen readers, including NVDA, JAWS, and VoiceOver.

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

The accessibility compliance for the Blazor Carousel 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 Carousel component is designed in accordance with the WAI-ARIA standard, making it accessible to screen readers and other assistive technology devices. The following list of attributes is added to the Blazor Carousel.

Attribute Purpose
aria-roledescription Set to carousel for the root element and slide for each carousel slide item.
aria-label Applied to the previous, next, and play/pause buttons, and to all indicator elements.
aria-current Set to true for the active item indicator element.
aria-hidden Set to true for all carousel elements except the currently visible item.
aria-live For the carousel items container, set to off when autoPlay is true and to polite when autoPlay is false.
role Set to region for the carousel root and group for each carousel slide item.

Keyboard interaction

All Blazor Carousel actions can be controlled using keyboard keys through the AllowKeyboardInteraction property, which is enabled by default. If you wish to disable the default keyboard interactions, you can set this property to false. This is particularly useful if the carousel contains input elements, as pressing the arrow keys might cause the carousel to move unexpectedly. By disabling keyboard interaction, the carousel remains static, allowing the user to focus on the input fields without any interruptions.

@using Syncfusion.Blazor.Navigations

<SfCarousel AllowKeyboardInteraction="false">
    <CarouselItem>
        <div>Slide 1</div>
    </CarouselItem>
    <CarouselItem>
        <div>Slide 2</div>
    </CarouselItem>
</SfCarousel>

This control implements keyboard navigation support by following WAI-ARIA practices. When focus is on the active Blazor Carousel element, you can use the following key combinations to interact with the Blazor Carousel.

Windows Mac Description
Alt + J ⌥ + J Focuses the carousel component (implemented at the application level).
Arrows (←, →) Arrows (←, →) Navigates between slides.
Home Home Navigates to the first slide.
End End Navigates to the last slide.
Space Space Plays or pauses the slide transitions.
Enter Enter Performs the action of the focused element (indicator or button).

Ensuring accessibility

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

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

See also