How to install the accessibility widget as an NPM package

The following documentation shows how to install, initialize, and use the accessibility widget in TypeScript/JavaScript projects using the @dockcodes/accessibility-widget package..

1. Installing the package

Using NPM:

npm install @dockcodes/accessibility-widget
Copy text

or Yarn:

yarn add @dockcodes/accessibility-widget
Copy text

2. Basic use

import accessibility from "@dockcodes/accessibility-widget";

await accessibility.init("YOUR_TOKEN");

accessibility.setContrast(true);
accessibility.setLanguage("en");
accessibility.setFontSize(4);

accessibility.onMenuOpen(() => {
  console.log("Menu opened!");
});
Copy text

3. Widget initialization

To properly run the widget, call the init() method with a valid API token: await accessibility.init("YOUR_TOKEN"); 🔑 You can generate a token for free here: wcag.dock.codes/my-account/tokens/ (opens in a new tab)

4. Managing widget functions

The library provides a rich set of methods for controlling accessibility features.

Examples of the most commonly used methods:

// Contrast
accessibility.toggleContrast();
accessibility.setContrast(true);

// Language
accessibility.setLanguage("pl");

// Text: Increase / Decrease
accessibility.increaseFontSize();
accessibility.setFontSize(5);

// Reading Guide
accessibility.toggleReadingGuide();
Copy text

5. Full list of available methods

6. Event Handlers

Widget udostępnia zdarzenia, które możesz wykorzystać np. do analityki lub integracji z aplikacją.

accessibility.onChangeLanguage((lang) => {
  console.log("New language:", lang);
});

accessibility.onChangeOptionContrast((value) => {
  console.log("Contrast changed to:", value);
});
Copy text

List of available events:

• onMenuOpen(cb) – open the menu
• onMenuClose(cb) – close the menu
• onChangeLanguage(cb) – change the language
• onChangePosition(cb) – change the positioning
• onChangeOption(cb) – change any option
• onChangeOptionContrast(cb)
• onChangeOptionFontSize(cb)
• onChangeOptionInvertColor(cb)
• onChangeOptionUnderline(cb)
• onChangeOptionDisableAnimations(cb)
• onChangeOptionDyslexic(cb)
• onChangeOptionEnlargeCursor(cb)
• onChangeOptionHideMedia(cb)
• onChangeOptionLetterSpacing(cb)
• onChangeOptionLineHeight(cb)
• onChangeOptionSaturation(cb)
• onChangeOptionShowLine(cb)
• onChangeOptionTextToSpeech(cb)
• onChangeProfile(cb)
• onChangeProfileAdhd(cb)
• onChangeProfileBlind(cb)
• onChangeProfileCognitiveAndLearning(cb)
• onChangeProfileColorBlind(cb)
• onChangeProfileDyslexia(cb)
• onChangeProfileEpileptic(cb)
• onChangeProfileLowVision(cb)
• onChangeProfileMotorImpaired(cb)

7. Integration with Google Tag Manager

import accessibility from "@dockcodes/accessibility-widget";

await accessibility.init("YOUR_TOKEN");

accessibility.onChangeOption((data) => {
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    event: "AccessibilityChange",
    optionType: data.type,
    optionValue: data.value
  });
});
Copy text

8. Resetting settings

You can restore the widget settings to their default values ​​at any time: accessibility.resetAll();

9. Sources and bug reporting

👉 If you encounter an issue or would like to submit an enhancement request, please visit: GitHub (opens in a new tab)