Skip to main content

​
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 install @inploi/plugin-accessibility

​
Basic usage

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

​
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)
};
OptionTypeDescription
interfacestringHex color for the overlay interface elements
triggerstringHex 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:
CodeLanguageCodeLanguage
enEnglishnlDutch
esSpanishhuHungarian
frFrenchslSlovenian
deGermanskSlovak
plPolishcsCzech
itItaliantrTurkish
ptPortuguesejaJapanese
heHebrewzhChinese
ruRussiantwTaiwanese
arArabic

​
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 },
    },
  },
}));
OptionTypeDefaultDescription
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: 4Horizontal offset in pixels
offsetY{ desktop: number, mobile: number }desktop: none, mobile: 4Vertical 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,
  },
}));

​
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 };
  };
};