diff --git a/docs/src/documentation/03-components/07-interaction/stepper/03-accessibility.mdx b/docs/src/documentation/03-components/07-interaction/stepper/03-accessibility.mdx new file mode 100644 index 0000000000..e9487f48ce --- /dev/null +++ b/docs/src/documentation/03-components/07-interaction/stepper/03-accessibility.mdx @@ -0,0 +1,34 @@ +--- +title: Accessibility +redirect_from: + - /components/stepper/accessibility/ +--- + +## Accessibility + +### Stepper + +The Stepper component has been designed with accessibility in mind. It can be used with keyboard navigation and includes properties that enhance the experience for users of assistive technologies. + +Although the `ariaLabel` and `ariaLive` props are optional for the Stepper (StepperStateless) component itself, it is recommended to fill them in to ensure that the component can be perceived by assistive technologies. This ensures that the Stepper (StepperStateless) component is accessible. + +Also, it is highly recommended to fill the `titleDecrement` and `titleIncrement` props in to provide a description of the decrement and increment buttons for screen readers. + +#### Example + +The content of children component is text, so it is read by screen reader. + +```jsx + +``` + +The screen reader will announce stepper title (`Passengers number`) and buttons title (`Add a passenger`, `Remove a passenger`) once they are focused by screen reader. +In case of changing the stepper value, the screen reader will announce the new value (`ariaLive` is set to `assertive` value).