> ## Documentation Index
> Fetch the complete documentation index at: https://docs.inploi.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Accessibility Plugin

> Accessibility tools overlay

# Accessibility Plugin

The Accessibility plugin adds an accessibility toolbar that lets visitors adjust how your site looks and behaves to suit their needs.

The toolbar is provided by [accessiBe](https://accessibe.com). The plugin loads accessiBe on your page and applies your branding, language, and placement — the tools themselves, and their behaviour, are accessiBe's.

<Note>
  If your careers site is built with inploi, you can turn the accessibility toolbar on without code from Studio under **Company settings → Accessibility** by enabling **Accessibility widget** and choosing a widget colour. Use this plugin when you are embedding inploi widgets on your own site instead.
</Note>

## Installation

<Tabs>
  <Tab title="npm">
    ```bash theme={null}
    npm install @inploi/plugin-accessibility
    ```
  </Tab>

  <Tab title="pnpm">
    ```bash theme={null}
    pnpm add @inploi/plugin-accessibility
    ```
  </Tab>

  <Tab title="CDN">
    ```html theme={null}
    <script defer src="https://sdk.inploi.com/@inploi/sdk/cdn/index.js"></script>
    <script defer src="https://sdk.inploi.com/@inploi/plugin-accessibility/cdn/index.js"></script>
    ```
  </Tab>
</Tabs>

## Basic usage

<Tabs>
  <Tab title="Package">
    ```typescript theme={null}
    import { initialiseSdk } from '@inploi/sdk';
    import { accessibilityPlugin } from '@inploi/plugin-accessibility';

    const sdk = initialiseSdk({ publishableKey: 'pk_...', env: 'sandbox' });
    const accessibility = sdk.register(accessibilityPlugin({
      widget: {
        colors: { interface: '#222222', trigger: '#5fbb46' },
      },
    }));

    accessibility.initialiseWidget();
    ```
  </Tab>

  <Tab title="CDN">
    ```html theme={null}
    <script defer src="https://sdk.inploi.com/@inploi/sdk/cdn/index.js"></script>
    <script defer src="https://sdk.inploi.com/@inploi/plugin-accessibility/cdn/index.js"></script>
    <script>
      document.addEventListener('DOMContentLoaded', function () {
        const sdk = inploi.initialiseSdk({ publishableKey: 'pk_...', env: 'sandbox' });
        const accessibility = sdk.register(inploi.accessibilityPlugin({
          widget: {
            colors: { interface: '#222222', trigger: '#5fbb46' },
          },
        }));
        accessibility.initialiseWidget();
      });
    </script>
    ```
  </Tab>
</Tabs>

## Features

The toolbar is provided by accessiBe and gives visitors tools such as text resizing, contrast and colour adjustments, reading aids, and motion controls. For the full, current list of tools and accessiBe's compliance information, see the [accessiBe documentation](https://accessibe.com).

## Configuration

### Colors

Colors are **required**. They control the widget's interface and trigger button appearance.

```typescript theme={null}
type Colors = {
  interface: string; // Main UI color (hex)
  trigger: string;   // Floating button color (hex)
};
```

| Option      | Type     | Description                                  |
| ----------- | -------- | -------------------------------------------- |
| `interface` | `string` | Hex color for the overlay interface elements |
| `trigger`   | `string` | Hex color for the floating trigger button    |

### Language

Set the widget language. Defaults to `'en'`.

```typescript theme={null}
const accessibility = sdk.register(accessibilityPlugin({
  widget: {
    colors: { interface: '#222222', trigger: '#5fbb46' },
    language: 'fr',
  },
}));
```

Supported languages:

| Code | Language   | Code | Language  |
| ---- | ---------- | ---- | --------- |
| `en` | English    | `nl` | Dutch     |
| `es` | Spanish    | `hu` | Hungarian |
| `fr` | French     | `sl` | Slovenian |
| `de` | German     | `sk` | Slovak    |
| `pl` | Polish     | `cs` | Czech     |
| `it` | Italian    | `tr` | Turkish   |
| `pt` | Portuguese | `ja` | Japanese  |
| `he` | Hebrew     | `zh` | Chinese   |
| `ru` | Russian    | `tw` | Taiwanese |
| `ar` | Arabic     |      |           |

### Position

Control the trigger button placement on desktop and mobile independently.

```typescript theme={null}
const accessibility = sdk.register(accessibilityPlugin({
  widget: {
    colors: { interface: '#222222', trigger: '#5fbb46' },
    position: {
      x: { desktop: 'left', mobile: 'right' },
      y: { desktop: 'bottom', mobile: 'bottom' },
      offsetX: { desktop: 20, mobile: 10 },
      offsetY: { desktop: 20, mobile: 10 },
    },
  },
}));
```

| Option    | Type                                                                                | Default                    | Description                 |
| --------- | ----------------------------------------------------------------------------------- | -------------------------- | --------------------------- |
| `x`       | `{ desktop: 'left' \| 'right', mobile: 'left' \| 'right' }`                         | `'right'`                  | Horizontal position         |
| `y`       | `{ desktop: 'top' \| 'center' \| 'bottom', mobile: 'top' \| 'center' \| 'bottom' }` | `'bottom'`                 | Vertical position           |
| `offsetX` | `{ desktop: number, mobile: number }`                                               | desktop: none, mobile: `4` | Horizontal offset in pixels |
| `offsetY` | `{ desktop: number, mobile: number }`                                               | desktop: none, mobile: `4` | Vertical offset in pixels   |

### Trigger visibility

Hide the floating trigger button if you want to open the widget programmatically or through your own UI.

```typescript theme={null}
const accessibility = sdk.register(accessibilityPlugin({
  widget: {
    colors: { interface: '#222222', trigger: '#5fbb46' },
    showTrigger: false,
  },
}));
```

## API

### `initialiseWidget()`

Injects the accessibility overlay into the page. Safe to call multiple times — subsequent calls are no-ops if the widget is already loaded.

```typescript theme={null}
accessibility.initialiseWidget();
```

## Full configuration reference

```typescript theme={null}
type AccessibilityWidgetConfig = {
  colors: {
    interface: string;
    trigger: string;
  };
  language?: 'en' | 'es' | 'fr' | 'de' | 'pl' | 'it' | 'pt'
    | 'nl' | 'hu' | 'sl' | 'sk' | 'cs' | 'tr'
    | 'ja' | 'tw' | 'zh' | 'he' | 'ru' | 'ar';
  showTrigger?: boolean;
  position?: {
    x?: { mobile: 'left' | 'right'; desktop: 'left' | 'right' };
    y?: { mobile: 'top' | 'center' | 'bottom'; desktop: 'top' | 'center' | 'bottom' };
    offsetX?: { mobile: number; desktop: number };
    offsetY?: { mobile: number; desktop: number };
  };
};
```