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. The plugin loads accessiBe on your page and applies your branding, language, and placement — the tools themselves, and their behaviour, are accessiBe’s.

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.

Installation

npm
pnpm
CDN

npm install @inploi/plugin-accessibility

pnpm add @inploi/plugin-accessibility

<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>

Basic usage

Package
CDN

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();

<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>

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.

Configuration

Colors

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

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'.

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.

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.

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

Trigger size

Set the size of the trigger button on desktop and mobile independently. Defaults to 'medium' on desktop and 'small' on mobile.

const accessibility = sdk.register(accessibilityPlugin({
  widget: {
    colors: { interface: '#222222', trigger: '#5fbb46' },
    triggerSize: { desktop: 'big', mobile: 'medium' },
  },
}));

Option	Type	Default	Description
`desktop`	`'small' \| 'medium' \| 'big'`	`'medium'`	Trigger button size on desktop
`mobile`	`'small' \| 'medium' \| 'big'`	`'small'`	Trigger button size on mobile

Both properties are optional — set only the one you want to change. Hide specific sections or adjustments from the widget interface. Anything not listed remains visible.

const accessibility = sdk.register(accessibilityPlugin({
  widget: {
    colors: { interface: '#222222', trigger: '#5fbb46' },
    hideComponents: ['search', 'adjustment_usefulLinks', 'adjustment_readMode'],
  },
}));

Available values:

Sections
`search`	`profilesSection`	`accessibilityStatement`

Adjustments
`adjustment_zoom`	`adjustment_fontSize`	`adjustment_readableFont`
`adjustment_lineHeight`	`adjustment_letterSpacing`	`adjustment_magnifier`
`adjustment_emphasizeTitles`	`adjustment_emphasizeLinks`	`adjustment_emphasizeHover`
`adjustment_emphasizeFocus`	`adjustment_textAlignLeft`	`adjustment_textAlignCenter`
`adjustment_textAlignRight`	`adjustment_darkContrast`	`adjustment_lightContrast`
`adjustment_highContrast`	`adjustment_highSaturation`	`adjustment_lowSaturation`
`adjustment_monochrome`	`adjustment_textColor`	`adjustment_titleColor`
`adjustment_backgroundColor`	`adjustment_mute`	`adjustment_hideImages`
`adjustment_readMode`	`adjustment_readingGuide`	`adjustment_readingMask`
`adjustment_usefulLinks`	`adjustment_stopAnimations`	`adjustment_bigBlackCursor`
`adjustment_bigWhiteCursor`

The full list is also exported from the package as ACCESSIBILITY_WIDGET_COMPONENTS, and the union type as AccessibilityWidgetComponent.

Background process

By default, accessiBe applies keyboard navigation corrections and screen-reader adjustments to your page in the background, in addition to the visual toolbar. Set disableBgProcess to true to deactivate these background corrections and keep only the toolbar.

const accessibility = sdk.register(accessibilityPlugin({
  widget: {
    colors: { interface: '#222222', trigger: '#5fbb46' },
    disableBgProcess: true,
  },
}));

Disabling the background process removes accessiBe’s automated keyboard navigation and screen-reader remediations, which may affect your site’s accessibility compliance. Only disable it if you handle these corrections yourself.

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.

accessibility.initialiseWidget();

Full configuration reference

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 };
  };
  triggerSize?: {
    mobile?: 'small' | 'medium' | 'big';
    desktop?: 'small' | 'medium' | 'big';
  };
  hideComponents?: AccessibilityWidgetComponent[];
  disableBgProcess?: boolean;
};

Overview

Plugins

Accessibility Plugin

Accessibility Plugin

Installation

Basic usage

Features

Configuration

Colors

Language

Position

Trigger visibility

Trigger size

Hiding widget components

Background process

API

`initialiseWidget()`

Full configuration reference

​Accessibility Plugin

​Installation

​Basic usage

​Features

​Configuration

​Colors

​Language

​Position

​Trigger visibility

​Trigger size

​Hiding widget components

​Background process

​API

​initialiseWidget()

​Full configuration reference

Accessibility Plugin

Installation

Basic usage

Features

Configuration

Colors

Language

Position

Trigger visibility

Trigger size

Hiding widget components

Background process

API

`initialiseWidget()`

Full configuration reference