diff --git a/packages/orbit-components/src/HorizontalScroll/README.md b/packages/orbit-components/src/HorizontalScroll/README.md index 8816064730..41593473ce 100644 --- a/packages/orbit-components/src/HorizontalScroll/README.md +++ b/packages/orbit-components/src/HorizontalScroll/README.md @@ -62,3 +62,29 @@ After adding import into your project you can use it simply like: | `"1000"` | | `"1200"` | | `"1600"` | + +## Accessibility + +The HorizontalScroll component comes with built-in accessibility features for screen reader users through ARIA labels. + +### ARIA labels + +When using arrows (`arrows`), you must provide accessibility labels for both arrow buttons using the `arrowLeftAriaLabel` and `arrowRightAriaLabel` props. These labels should be properly translated strings, as they will be read by screen readers to users in their preferred language. + +```jsx + + {/* content */} + +``` + +The labels should clearly describe the action that will occur when the button is pressed. For example: + +- "See previous items" +- "Scroll to previous cards" +- "Show previous products" + +Remember that these strings must be translated to provide an accessible experience for screen reader users across different languages.