Accessibility in Blazor Stepper Component

4 Jan 20241 minute to read

Accessibility is achieved in the Stepper component through WAI-ARIA standard and keyboard navigations. The Stepper component can be effectively accessed through assistive technologies such as screen readers.

Keyboard interaction

The Stepper component is interactive with the below keyboard shortcuts.

Keyboard shortcuts Actions
Up Arrow Focuses the previous step in a vertical Stepper.
Down Arrow Focuses the next step in a vertical Stepper.
Left Arrow Focuses the previous step in a horizontal Stepper.
Right Arrow Focuses the next step in a horizontal Stepper.
Home Focuses on the first step of the Stepper.
End Focuses on the last step of the Stepper.
Enter / Space Activates the currently focused step.

ARIA attribute

The following ARIA attributes are used in Stepper component based on its state.

Properties Functionality
aria-label Attribute provide a descriptive text that labels the interactive element for accessibility.
aria-current Attribute denotes the currently active step in the Stepper.
aria-disabled Indicates when the step is disabled and cannot be interacted.