Vue Stepper Component Accessibility

Stepper Accessibility

Detailed overview of the accessibility features implemented in CoreUI Vue Stepper, ensuring compliance with WAI-ARIA guidelines.

On this page

The Vue Stepper component is fully accessible out of the box:

Step buttons use role="tab" and related ARIA attributes (aria-selected, aria-controls, tabindex)
Step content areas are labeled with role="tabpanel" and properly linked
When the step changes while focus is inside the stepper, or the change takes focus away, focus moves to the new step’s button, so screen readers read which step the user is on
When a step whose form has novalidate fails validation, focus moves to the first invalid control, which is read with its message: the stepper adds the .invalid-feedback that follows the control, which covers feedback-invalid, or the elements named in data-coreui-invalid-feedback, to its aria-describedby. The panes are not live regions
Full keyboard support is included

The Stepper component supports comprehensive keyboard navigation out of the box:

Key	Function
`ArrowLeft` / `ArrowUp`	Moves focus to previous step.
`ArrowRight` / `ArrowDown`	Moves focus to next step.
`Home` / `End`	Jumps focus to first or last step