Accessibility widget installation – NPM
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-widgetor Yarn:
yarn add @dockcodes/accessibility-widget2. 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!");
});
Note: the
init() method is asynchronous – remember to use await.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/
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();
5. Full list of available methods
| Method | Description |
|---|---|
toggleContrast() |
Enable/Disable contrast |
setContrast(enabled: boolean) |
Sets the contrast |
toggleInvertColors() |
Inverts colors |
setInvertColors(enabled: boolean) |
Sets color inversion |
toggleUnderline() |
Link underlines |
setUnderline(enabled: boolean) |
Sets link underlines |
setFontSize(level: number) |
Set font size 1-5 |
increaseFontSize() |
Increases font size |
decreaseFontSize() |
Reduces font size |
increaseLetterSpacing() |
Increase spacing |
setLetterSpacing(level: number) |
Sets spacing 1-5 |
increaseLineHeight() |
Increases line height |
setLineHeight(level: number) |
Sets the height of lines 1-5 |
increaseSaturation() |
Increases saturation |
setSaturation(level: number) |
Sets the saturation 1-3 |
toggleTextToSpeech() |
TTS – reading content |
setTextToSpeech(enabled: boolean) |
Enables/disables TTS |
toggleCursorEnlarge() |
Enlarged cursor |
setCursorEnlarge(enabled: boolean) |
Enables the enlarged cursor |
toggleHideMedia() |
Hide media |
setHideMedia(enabled: boolean) |
Enables/disables media hiding |
toggleDisableAnimations() |
Disables animations |
setDisableAnimations(enabled: boolean) |
Enables/disables animations |
toggleReadingGuide() |
Reading guide line |
setReadingGuide(enabled: boolean) |
Enables/disables the guide |
toggleDyslexicFont() |
Font for dyslexics |
setDyslexicFont(enabled: boolean) |
Enables font for dyslexics |
toggleProfileBlind() |
Profile for the completely blind |
setProfileBlind(enabled: boolean) |
Sets the blind profile |
toggleProfileLowVision() |
Low Vision Profile |
toggleProfileEpileptic() |
Epileptic-safe profile |
resetAll() |
Reset all options |
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);
});List of available events:
onMenuOpen(cb)– open the menuonMenuClose(cb)– close the menuonChangeLanguage(cb)– change the languageonChangePosition(cb)– change the positioningonChangeOption(cb)– change any optiononChangeOptionContrast(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
});
});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