> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Sample Flows

## Article: Sample Flows

## Article Link: https://dev.wix.com/docs/sdk/site-sdk/site-settings/translations/sample-flows.md

## Article Content:

# Translations API: Sample Flows

This article presents possible use cases and corresponding sample flows that you can support. It provides a useful starting point as you plan your implementation.

## Label a component for screen readers

To label a component for screen readers, follow these steps:

1. Retrieve a lookup function for your component's namespace:

   ```ts
   const t = translationsService.translate('ProductGallery')
   ```

2. Retrieve the label by its key. Specify an English fallback, so screen readers don't announce the key when the namespace has no string for it:

   ```ts
   const nextLabel = t('nextButtonAriaLabel', 'Next product')
   ```

3. Set the label as the button's `aria-label`:

   ```tsx
   return <button aria-label={nextLabel}>→</button>
   ```

## Pass a set of labels to your own component

To pass a set of labels to your own component, follow these steps:

1. Retrieve every string in your component's namespace:

   ```ts
   const strings = translationsService.getTranslations('ProductGallery')
   ```

2. Read each label by its key, with your own default for a key the namespace doesn't have. `getTranslations()` has no fallback, so a missing key is `undefined`:

   ```ts
   const labels = {
       next: strings.nextButtonAriaLabel ?? 'Next product',
       previous: strings.previousButtonAriaLabel ?? 'Previous product',
   }
   ```

3. Pass the labels to your own `Carousel` component, with your own `products` list:

   ```tsx
   return <Carousel items={products} labels={labels} />
   ```